<!--
九、CSS列表
列表类型list-style-type:改变列表的标志
十、CSS表格
border：表格边框
border-collapse：折叠边框
width,height:设置表格宽和高
text-align:水平对齐方式
vertical-align：垂直对齐（顶部，中部，底部）
padding:表格内边距,内容到边框
表格颜色：background:背景色，color：字体颜色
十一、CSS轮廓：
绘制与元素周围的一条线，位于边框的外围，起到突出元素的作用
outline:属性规定轮廓的样式style、颜色color、宽度width
十二、CSS盒模型
规定元素框处理元素内容、内边距、外边距、及百年狂的处理方式
1.内边距、外边距默认0
2.CSS背景应用：元素内容+内边距+边框组成的区域
3.许多元素在不同的浏览器下可能会有不同的内外边距 ，
若想要该元素在所有游览器中内外边距都为0，可以使用通用选择器设置如下
*{
padding：0；
margin：0；
}
4.在CSS指定的width和height指的是内容的宽和高，增加或减少内外边距的不会影响内容区域的大小
内边距：padding属性设置内边距，可以设置像素值、百分比，但不允许负值。
上下内边距的为宽的
元素边框：border样式、宽度、颜色
边框和背景：边框样式：border-style：none无边框 dotted点状边框
边框宽度：border-width
一旦将border的style设置为none，则此元素无边框的任何属性，即使设置也没用
外边距：margin接受所有的长度单位
auto：默认
值复制：如果缺少左边距的值，则使用右边距的值
如果缺少下边距，则使用上边距的值
如果缺少右边距，则使用上边距的值
外边距合并
当两个处置外边距相遇时，他们合并成一个外边距
盒模型与display属性
两种基本的盒模型
bolck（块级元素）：这种盒模型组件默认占据一行，允许通过CSS设置其宽度、高度
inline（内联元素）：这种盒模型组件不会占据一行，一行中可以放置多个组件，即使使用CSS设置宽度。高度也不会起作用<span../> <a../><img../>
dispaly属性：（inline、block）可以改变盒模型
none值：设置目标对象隐藏，该对象占用的页面空间也会释放
visibility：（hidden，visiable）设置为hiden该元素不可见，但是占用的页面空间还会保留。
inline-block盒模型：
多个组件并列显示，仍然可以通过width和height设置宽和高
可实现多栏布局、水平导航菜单
inline-table盒模型：
默认情况下，table属于block类型，table左右两边不允许出现其他内容
CSS为table提供inline-table：允许通过width和height设置宽度与高度，并且允许table元素左右两边出现掐腰内容
垂直方向对其：vertical-align：bottom/top底端或顶端对齐
可将组件变为表格
list-item盒模型：
list-item可以将目标组件转换为类似于<ul../>列表
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- <style type="text/css">
ul.circle{
list-style-type: circle;
}
ol.squre{
list-style-type: square;
}
ol.lower-alpha{
list-style-type: lower-alpha;
}
</style> -->
<!-- <style type="text/css">
table{
width: 100%;
border-collapse: collapse;
}
th{
height: 50px;
background-color: blueviolet;
color: aliceblue;
}
td{
height: 50%;
text-align: center right;
vertical-align: bottom;
padding: 15px;
}
table,th,td{
border: 1px solid blue
}
</style> -->
<!-- <style type="text/css">
#customers{
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
width: 100%;
border-collapse: collapse;
}
#customers td,#customers th{
font-size: 1em;
border: 1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#customers th{
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #A7C942;
color: #ffffff;
}
#customers tr.alt td{
color: #000000;
background-color: #EAF203;
}
</style> -->
<!-- <style type="text/css">
p{
border: black solid thin;
outline: blue dotted thick;
}
</style> -->
<!-- <style type="text/css">
h1{
border: 1px solid ;
/*padding: 10px;*/
padding-top: 10px 0.25em 2ex 20%;
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
</style> -->
<!-- <style type="text/css">
p.dotted{
border-style: dotted;
}
p.dashed{
border-style: dashed;
}
p.solid{
border-style: solid;
}
p.groove{
border-color: green;
border-style: groove;
}
p.ridge{
border-style: ridge;
}
p.inset{
border-style: inset;
}
p.outset{
border-style: outset;
}
img{
border-style: outset;
}
</style> -->
<!-- <style type="text/css">
p{
border-style: solid dotted dashed ridge;
}
</style> -->
<!-- <style type="text/css">
p{
border-style: solid;
border-width: thick;
}
</style> -->
<!-- <style type="text/css">
p{
border-style: none;
border-width: 50px
}
</style> -->
<!-- <style type="text/css">
p{
border-style: solid;
border-color: blue red;
}
</style> -->
<!-- <style type="text/css">
a:link,a:visited{
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a：hover{
border-color: green;
}
</style> -->
<!-- <style type="text/css">
p#1{
margin: 10px 20px;
}
p#2{
margin: 20px 10px;
}
</style> -->
<!-- <style type="text/css">
div,span{
width: 300px;
height: 40px;
border: 1px solid black;
}
</style> -->
<!-- <style type="text/css">
span{
width: 300px;
height: 40px;
border: 1px solid black;
display: inline;
}
span{
width: 300px;
height: 40px;
border: 1px solid black;
display: block;
}
</style> -->
<!-- <style type="text/css">
div{
width: 300px;
height: 40px;
background-color: #dddddd;
border:2px solid black;
}
</style> -->
<!-- <style type="text/css">
body{
margin: 0px;
}
div#container{
width: 960px;
margin: auto;
}
div>div{
border: 1px solid #aaaaff；
display:inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
padding:5px;
}
</style>
-->
<!-- <style type="text/css">
body>div{
text-align:center;
margin: auto;
}
div>div{
display: inline-block;
border:1px solid black;
}
a{
text-decoration: none;
display:block;
width: 120px;
padding:10px;
background-color: #eee;
}
a:hover{
background-color: #aaa;
font-weight: bold;
}
</style> -->
<!-- <style type="text/css">
td{
border: 1px solid black;
}
table{
width: 360px;
border-collapse: collapse;
display: inline-table;
vertical-align: top;
}
</style> -->
<!-- 利用div元素画表格 -->
<!-- <style type="text/css">
div>div{
display: table-row;
padding: 10px;
}
div>div>div{
display: table-cell;
border:1px solid black;
}
</style> -->
<!-- <style type="text/css">
div{
display: list-item;
list-style-type: square;
margin-left: 10px
}
</style> -->
<!-- <style type="text/css">
body>div{
display: list-item;
list-style-type: disc;
margin-left: 20px
}
div>div{
display: list-item;
list-style-type: square;
margin-left: 40px;
}
</style> -->
<!-- <style type="text/css">
body{
margin: 0px;
}
div#container{
width: 960px;
margin:auto;
}
div>div{
border: 1px solid #aaf;
box-sizing: border-box;
border-radius: 12px 12px 0px 0px;
background-color: #ffc;
padding: 5px
}
</style> -->
<!-- <style type="text/css">
div>div{
width: 220px;
padding:5px;
margin: 2px;
float: left;
background-color: #ddd;
}
</style> -->
<style type="text/css">
div{
width: 300px;
height: 70px;
white-space: nowrap;
border: 1px solid black;
margin: 15px;
}
</style>
</head>
<body>
<!-- <ul class="circle">
<li>java从入门到精通</li>
<li>java从入门到放弃</li>
</ul>
<ol class="square">
<li>sqqq</li>
<li>daS</li>
</ol>
<ol class="lower-alpha">
<li>sqqq</li>
<li>daS</li>
</ol> -->
<!-- <table>
<tr>
<th>
基础
</th>
<th>
进阶
</th>
</tr>
<tr>
<td>java</td>
<td>c语言</td>
</tr>
<tr>
<td>java进阶</td>
<td>c语言进阶</td>
</tr>
</table> -->
<!-- <table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="alt">
<th>Baidu</th>
<th>Li YanHong</th>
<th>China</th>
</tr>
<tr>
<td>Goole</td>
<td>Larry Page</td>
<td>USA</td>
</tr>
<tr class="alt">
<td>Lenovo</td>
<td>Liu ChuanZhi</td>
<td>China</td>
</tr>
<tr>
<td>llll</td>
<td>weq</td>
<td>qqw</td>
</tr>
<tr class="alt">
<td>dA</td>
<td>XL</td>
<td>YY</td>
</tr>
</table> -->
<!-- <p>gvhbjknkml,;.fcghvjbknlm;,</p> -->
<!-- <h1>h1标签</h1> -->
<!-- <p class="dotted">段落</p>
<p class="dashed">段落</p>
<p class="solid">段落</p>
<p class="groove">段落</p>
<p class="ridge">段落</p>
<p class="inset">段落</p>
<p class="outset">段落</p>
<img src="longmao.gif"> -->
<!-- <p>段落</p> -->
<!-- <a href="#">点我！！</a> -->
<!-- <p id="1">段落1</p>
<p id="2">段落2</p>-->
<!-- <div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span> -->
<!-- <input type="button" value="隐藏"
onclick="document.getElementById('test1').style.display='none';" />
<input type="button" value="提示" onclick="document.getElementById('test1').style.display='';"/>
<div id="test1">
使用display属性控制元素的可见与否
</div>
<hr>
<input type="button" value="隐藏"
onclick="document.getElementById('test2').style.visibility='hidden';" />
<input type="button" value="提示" onclick="document.getElementById('test2').style.visibility='visible';"/>
<div id="test2">
使用visibility属性控制元素的可见与否
</div>
<hr> -->
<!-- <div id="container">
<div style="width: 200px">div1</div>
<div style="width:500px">div2</div>
<div style="width: 200px">div3</div>
</div> -->
<!-- <div>
<div>
<a href="#">前端从入门到精通</a>
</div>
<div>
<a href="#">HTML从入门到精通</a>
</div>
<div>
<a href="#">JS从入门到精通</a>
</div>
</div> -->
<!-- 前面内容
<table>
<tr>
<td>javaSE</td>
<td>java se thread</td>
</tr>
<tr>
<td>javaee</td>
<td>iavaee spring</td>
</tr>
</table>
后面内容 -->
<!-- <div style="display: table;width: 400px">
<div style="display: table-caption;">java课程体系</div>
<div>
<div>javase</div>
<div>thread</div>
</div>
<div>
<div>javaee</div>
<div>spring</div>
</div>
</div> -->
<!-- <div>javase</div>
<div>javaee</div>
<div>javascript</div> -->
<!-- <div>
javase课程
<div>javasete=gread</div>
<div>javasesss</div>
</div>
<div>
javaee课程
<div>javaee spring</div>
<div>javaee springmvc</div>
<div>javaee springboots</div>
</div> -->
<!-- <div id="container">
<div style="float: left;width: 220px">
<h2>javase课程体系</h2>
<ul>
<li>l</li>
<li>2</li>
<li>li</li>
</ul>
</div>
<div style="float: left;width: 500px">
<h2>javaee课程</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div style="float: left;width: 240px">
<h2>javascript课程</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div> -->
<!-- <div>
<div>1</div>
换行
<div style="clear: both;">2</div>
<div>3</div>
<div>4</div>
</div> -->
进度条
<div>
<h3>
不设置overflow属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow: hidden;">
<h3>
设置overflow属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-x: hidden;">
<h3>
设置overflow-x属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-y: hidden;">
<h3>
设置overflow-y属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow: auto">
<h3>
设置overflow-y:auto属性
</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>前端——CSS（2）
猜你喜欢
转载自blog.csdn.net/qq_40409115/article/details/80787968
今日推荐
周排行