1visibility与display
<!-- display:block/none/inline //显示为块 隐藏 显示为行
visibility:visible//显示元素
visibility:hidden//隐藏元素 隐藏之后 ,该元素占的位置还在
display: none; 这个隐藏之后,元素所占的位置也没有了
-->
<div id="" style="width: 200px;height: 200px;background:greenyellow;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;margin-top: 40px;display: none;">
</div>
2 浮动与清除浮动
<!-- float:left; 层的浮动,可以让层一字排开 -->
<div id="" style="width: 200px;height: 200px;background:greenyellow;float:left;">
</div>
<div id="" style="width: 200px;height: 200px;background: red;float:left;">
</div>
<!-- 清除上面的浮动,不影响下面的层
clear: both; left right 清除浮动
-->
<div id="" style="clear:both;">
</div>
<div id="" style="width: 200px;height: 200px;background:pink;">
</div>
3 边框属性
<!-- border: 1px black solid; 设置边框 值1 边框粗细 值2 边框颜色 值三 边框线条样式 -->
<div id="" style="width: 200px;height: 200px;border: 10px black dotted;">
</div>
<div id="" style="width: 200px;height: 200px;border-width:2px;border-style:solid ;border-color:red ;border-bottom-color: yellow;">
</div>
<img src="img/c1.jpg" style="width:200px ;height: 200px;margin-top: 50px;border: 2px aqua solid;">
</body>
</html>
4 层的层叠顺序
<!-- z-index: 3
当几个层发送了重叠后 可以用 z-index 来调整叠放顺序,谁的数值最大,谁就在最上面
-->
<div id="" style="width: 200px;height: 200px;background: red;position: absolute;top:20px;left: 30px;z-index: 3;">
</div>
<div id="" style="width: 200px;height: 200px;background:yellow;position: absolute;top: 50px;left:50px;z-index: 2;">
</div>
<div id="" style="width: 200px;height: 200px;background:greenyellow;position: absolute;z-index: 1;">
</div>
5 行标签与块标签的转换
<h1 style="display:inline">这是一个块标签</h1><font size="" color="">这是一个行标签</font>
因为<h1></h1>是一个块标签,但是因为加了display:inline 就变成了一个行标签
<font size="" color="" style="display: block;">这是一个行标签222222</font>------asdfasdfsadf
</body>
</html>
因为该标签是个行标签,加了display:block 就变成了一个块标签
块标签占据一行,后面不允许有其他标签,
行标签后面可以加其他标签
<!-- 块标签:默认会占据一行的宽度 div p <h1></h1> ul 我CSS设置块标签距离 上下左右的间距是起作用的 -->
<!-- 行标签:默认不会占据一样的位置 a font b s 设置左右间距起作用,设置上下间距不起作用-->
6 行标签与块标签
<!-- div 是一个纯洁的块标签(不带任何样式,无宽无高无背景)
span 是一个纯洁的行标签 不带任何样式 -->
<div id="" style="width: 200px;height: 200px;background:yellow;margin-top: 50px;margin-left: 100px;">
</div>
<span style="font-size: 50px;margin-top: 100px;margin-left: 100px;display: block;">这是一个纯洁的行标签</span>
</body>
</html>
7 一些标签含义
border-radius:5px ; //边框加圆角
text-align: center; //使边框里的文字左右居中
line-height:55px ; //使边框里的文字上下居中
letter-spacing: 8px; //字符间距
box-shadow: 5px 5px 5px gray; //左右上下有阴影,为灰色
}
.bt:hover{
box-shadow: 10px 10px 10px gray;//当鼠标放在该边框之后,阴影变大为10px,
width: 141px; //当鼠标放在该边框之后,宽变大为141px
height: 56px; 同理
}
8 绝对定位与相对定位
<!--我们页面的元素,默认摆放的位置,都是采用相对定位
元素默认采用的是相对定位
当然第一个元素会跑到页面的起始位置(左上角),后面的元素采用的是相对定位,就会参照上一个元素的位置
但是有时,我们还会采用绝对定位,所谓的绝对定位,就是元素,会参照起始位置,而不去参照我的上一个元素
-->
<!-- 设置元素的定位方式
position: 定位方式
absolute;绝对定位
relative;相对定位
采用绝对定位后:我们设置元素距离原点上下左右的位置 top left right bottom
-->
<button type="button" style="position:absolute;top: 10px;left: 10px;">一个按钮</button>
<button type="button" style="position:absolute;top: 20px;left: 30px;">一个按钮</button>
<button type="button" style="position: absolute;top: 50px;left: 50px;">一个按钮</button>
9 超出内容部分怎样处理
<!-- overflow:scroll 加上滚动条/visible默认值,展示出来/hidden 超出的部分隐藏掉/auto 自动判断是否加滚动条 //超出内容是否包裹
内容超出层的宽高,的处理办法
-->
<div id="" style="height: 50px;width: 100px;background-color:yellow ;overflow:scroll">
asdfasdfasdfsadfds
asdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfa
sdfasdfsadfdsasdfasdfasd
fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
fsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfdsasdfasdfasdfsadfds
asdfasdfasdfsadfds
</div>
10 CSS背景属性
background-color:red ; 设置背景颜色
background-image: url(img/c1.jpg); 设置背景图片
background-size: 100% 800px; 设置背景图片的宽高尺寸
-->
<body style="background-color:red ;background-image: url(img/c1.jpg);background-size: 100% 800px;">
<div id="" style="width: 300px;height: 300px;background:red ;background-image: url(img/c.jpg);background-size: 100% 100%;">
</div>
</body>
</html>
11 通过外部样式引入CSS标签(统一控制标签)
12
13 div : hover
14 margin与padding
15
16 字符间距与单词间距
17 text-align与line-height
18
19
20 repeat
21 盒子模型