CSS:层叠样式表(Cascading Style Sheets)
1.css的特征
2.css的引入
3.选择器
4.伪类选择器
5.伪元素选择器
6.字体样式 文本样式 背景属性
7.盒模型 border margin padding
8.display visibility 属性
9.float 属性
10.position z-index 属性
11.网页布局
一、css的特征:
1.css解决了两个问题:
1.将html页面的内容与样式分离。
2.提高web开发的工作效率。
2.css的优势:
1.内容与表现分离
2.网页的表现统一,容易修改
3.丰富的样式,使页面布局更加灵活
4.减少网页的代码量,增加网页浏览器速度,节省网络带宽
5.运用独立页面的css,有利于网页被搜索引擎收录
3.css语法:
1.选择器;2.声明=属性+值;
/*这是注释*/
二、css的引入:
1.内嵌式
一般不写内嵌式,以后不好维护
1.border
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px;
border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue;
border-top-style: solid; 实线
border-bottom-style: dashed; 矩形虚线边框
border-left-style: dotted; 点状虚线边框
border-right-style: double; 两条实线
四个值 上 右 下 左
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
三个值 上 左右 下
border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
两个值 上下 左右
border-style: dotted solid;
border-width: 5px 20px;
border-color: blue yellow;
一个值 上下左右
border-style: dotted;
border-width: 20px;
border-color: blue;
简写:
border: none 无边框
border: 10px solid yellow;
2.margin
外边距: 控制元素与元素之间的距离
注意:margin会改变实际大小,背景色不会渲染到margin区域 这个区域会以空白显示,但是也属于盒子的一部分。
margin-top: 20px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 40px;
上 右 下 左
margin: 20px 30px 40px 50px;
上 左右 下
margin: 20px 30px 40px;
上下 左右
margin: 20px 40px;
上下左右
margin-bottom: 50px;
水平居中 盒子元素
margin: 0 auto;
特殊性:
水平方向没有这种特性;垂直方向的特殊性;
当两个垂直外边距相遇时,会形成一个外边距,称为 外边距合并,已大的为基准!!
解释:
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之(以最大的为基准)。
注意:父子级盒子 嵌套 设置外边距 会形成外边距合并,影响页面布局。
解决办法:
(子债父还)
1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。
2.父级overflow:hidden
3.父级设置padding(破坏非空白的折叠条件)
4.父级设置border
3.padding
内边距:控制内容到边框的距离,内边距会扩大元素所在的区域,width+padding;
注意:为元素设置内边距,只能影响自己,不会影响其他的元素,padding不支持负值。
padding-left: 20px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 40px;
padding: 10px 20px 30px 40px;
padding: 10px 30px 50px;
padding: 10px 20px;
padding: 10px;
八、display visibility 属性
1.控制HTML元素的显示和隐藏
2.块级元素与行内元素的转换
display:none;
注:
none
控制元素隐藏 不占位置
HTML文档中元素存在,但是在浏览器中不显示。一般用于配合Javascript代码使用。
block
块级元素 独占一行,可设宽高(div p h ul ol li)
默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
inline-block
行内块元素 一行内展示,可设宽高 (img input)
同时具有行内元素和块级元素的特点。
inline
行内元素 一行内展示,不可设宽高 (a span label)
元素的 width、height、margin-top都不会有什么影响.
一般:
行内块元素 转化为 块级元素;
行内元素 转化为 块级元素/行内块元素;
visibility: hidden;
注:
控制元素隐藏 占位置 影响后面盒子的布局
九、float 属性
文档流:指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。
浮动影响:浮动可以使元素按指定方向排列,直到遇到父元素的边界或另一个浮动元素停止。
float:left; 左浮动 左侧为起始,从左往右依次排列
right; 右浮动 右侧为起始,从右往左依次排列
none;
浮动效果:
1.浮动可以使元素脱离文档流,不占位置
脱离文档流,也就是将元素从普通的布局排版中拿走,
其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
2.浮动会使元素提升层级
3.浮动可以使块元素在一行内排列,不设置宽高时,可以使元素适应内容
4.浮动可以使行内元素支持宽高
浮动说明:
假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,
那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);
如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。
此外,浮动的框之后的block元素元素会认为这个框不存在,但其中的文本依然会为这个元素让出位置。
浮动的框之后的inline元素,会为这个框空出位置,然后按顺序排列。
浮动产生的问题:
父元素不设置高度时,子元素设置了浮动,不会撑开父元素的高度,此时父盒子没有高度了。因为子元素不占位置了!
如果在父盒子下面还有一个标准流的盒子,那么就会影响页面的布局。------清除浮动
解决办法:
1.给父盒子设定固定高度;缺点:不灵活;
2.给浮动元素最后一个加一个空的块级元素,且该元素为不浮动float:none,设置clear:both,就会撑开盒子。
缺点:结构冗余
3.官方推荐:推荐使用:
.wrap:after{
content: ‘.‘;
display: block;
height: 0;
visibility: hidden;
clear: both;
}
4.推荐使用:给父元素添加overflow:hidden eg: .warp{overflow: hidden;}
十、position z-index 属性
1.position
position: absolute;
top: 20px;
bottom: 10px;
left: 20px;
right: 0px;
static : 默认值
relative : 相对定位
1. 不设置偏移量的时候,对元素没有任何影响。
2. 相对定位可以提升层级关系。
3. 相对定位是相对于自身定位。
absolute : 绝对定位
1. 可以提升层级关系。
2. 脱离文档流。
3. 在没有父级元素定位时,以浏览器的左上角为基准定位的。
4. 有父级的情况下,父级设置相对定位,子集设置绝对定位,是以父盒子进行定位的。
(父相子绝) 来进行位置的调整
fixed : 固定定位(可用来打广告!)
2.z-index
border-radius: 50%; # 设置圆
border-radius: 10px 20px 30px 40px; # 设置边角
position: absolute;
z-index: 3;
z-index: 1000;
注:
数字越大,越在外层!
十一、网页布局
网页布局:
上下 结构
上中下 结构
上左右下 结构: 1-2-1 结构
上左中右下 结构: 1-3-1 结构
一般:
首先:
*{padding:0;margin:0;}
ul>li{list-style:none;}
a{text-decoration:none;}
.wrap{width:100%;background-color:gray;}
.header{}
.content{}
.footer{}
...
...