一、css
选择器补充
1.链接伪类选择器
链接伪类选择器实际工作开发中的写法:
<!--a 是标签选择器 所有的链接-->
a { color:red; }
<!--:hover 是链接伪类选择器鼠标经过-->
a:hover {color:red;}
2.focus
伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标,一般情况<input>
类表单元素才能获取,因此这个选择器也主要针对于表单元素来说。
input:focus { background-color:yellow;}
3.结构伪类选择器
结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素
E:first-child
匹配父元素中的第一个子元素E
E:last-child
匹配父元素中最后一个E元素
E:nth-child(n)
匹配父元素中的第n个子元素E
E:first-of-type
指定类型E的第一个
E:last-of-type
指定类型E的最后一个
E:nth-of-type(n)
指定类型E的第n个
.show table tbody tr:nth-child(2n+1) { background-color: #f7f3fd; }
注意:类选择器、属性选择器、伪类选择器,权重为10.
nth-child (n)选择某个父元素的一个或多个特定的子元素 区别:
(1)nth-child对父元素里面所有孩子排序选择(序号是固定的)先找到第n个孩子,然后看看是否和E匹配
(2)nth-of-type
对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E 找第n个孩子
4.后代选择器
后代选择器又称为包含选择器,可以选择父元素里面子元素。
语法: 元素1 元素2{样式声明}
上述语法表示选择元素1里面的所有元素2(后代元素)。
例如: <!--ul里面所有的11标签元素-->
ul li { list-style:none; }
元素1和元素2中间用空格隔开
5.子选择器
子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。
语法: 元素1>元素2{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素
例如:
<!--选择 div里面所有最近一级p标签元素-->
div>p { text-indent: 2em; }
元素1和 元素2中间用大于号 隔开
二、盒子模型
1.盒子模型
盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 CSS
盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容
2.边框
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
语法: border : border-width ||border-style ||border-color
属性 | 作用 |
---|---|
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式 |
border-color | 边框颜色 |
边框样式border-style 可以设置如下值:
属性值 | 作用 |
---|---|
none | 没有边框即忽略所有边框的宽度(默认值) |
solid | 边框为单实线(最为常用的) |
dashed | 边框为虚线 |
边框简写:(没有顺序)
border: 1px solid red; border-top: 1px solid red;
边框案例
div { width: 100px; height: 100px; background-color: pink; border: 10px blue solid; } div { border-top: 10px solid red; }
3.内边距(padding)
padding 属性用于设置内边距,即边框与内容之间的距离。
属性 | 作用 |
---|---|
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
添加内边距后:
(1)边框和文字有距离
(2)padding影响了盒子实际大小。如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。 解决方案:如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。
好处:让padding撑大盒子
4.外边距(margin )
margin 属性用于设置外边距,即控制盒子和盒子之间的距离。
属性 | 作用 |
---|---|
margin-left | 左外边距 |
margin-right | 右外边距 |
margin-top | 上外边距 |
margin-bottom | 下外边距 |
margin简写方式代表的意义跟 padding 完全一致。 外边距可以让块级盒子水平居中,必须满足两个条件:盒子必须指定了宽度(width),盒子左右的外边距都设置为auto 。
.header{ width:960px; margin:0 auto;}
常见的写法,以下三种都可以:
margin-left:auto;
margin-right: auto;
margin: auto;
margin:0 auto;
注意:以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加text-align:center
即可.
外边距合并: 使用margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况: (1)相邻块元素垂直外边距的合并 (2)嵌套块元素重直外边距的塌陷
5.清除内外边距
* { padding:0; margin:0; }
综合案例:
6.圆角边框
在 CSS3中,新增了圆角边框样式,border-radius 属性用于设置元素的外边框圆角。
语法:
border-radius: length;
参数值可以为数值或百分比的形式 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
三.浮动
1.什么是浮动?
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法:
选择器 { float:属性值;}
属性值 | 描述 |
---|---|
none | 元素不浮动 |
left | 元素向左浮动 |
right | 元素向右浮动 |
2.浮动特性
(1)浮动元素会脱离标准流(脱标),浮动的盒子不再保留原先的位置
(2)浮动的元素会一行内显示并且元素顶部对齐
(3)浮动的元素会具有行内块元素的特性
注意:浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。
任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性。
●如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定
●浮动的盒子中间是没有缝隙的,是紧挨着一起的
效果如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动</title> <style> .box { height: 615px; width: 1226px; background-color: aquamarine; } .left { width: 234px; height: 615px; background-color: bisque; float: left; } .right { width: 992px; height: 615px; float: left; } .right>div { width: 234px; height: 300px; background-color: azure; float: left; margin-left: 14px; margin-bottom: 14px; } </style> </head> <body> <div class="box"> <div class="left"></div> <div class="right"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html>
3.清除浮动语法:
选择器 { clear:属性值;}
属性值 | 描述 |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
我们实际应用中,几乎只用clear: both; 清除浮动的策略是:闭合浮动.
方法:
(1)额外标签法也称为隔墙法,是W3C
推荐的做法。
(2)父级添加 overflow 属性
(3)父级添加after伪元素
(4)父级添加双伪元素
四.定位
1.定位组成
定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。
定位=定位模式+边偏移
(1)定位模式:
值 | 语义 |
---|---|
static | 静态定位 |
relative | 相对定位 |
absolute | 绝对定位 |
fixed | 固定定位 |
(2)边偏移: 边偏移就是定位的盒子移动到最终位置。有top、bottom, left和 right 4个属性.
边偏移属性 | 示例 | 描述 |
---|---|---|
top | top:80px | 顶端偏移量,定义元素相对于其父元素上边线的距离 |
bottom | bottom: 80px | 底部偏移量,定义元素相对于其父元素下边线的距离 |
left | left:80px | 左侧偏移量,定义元素相对于其父元素左边线的距离 |
right | right:80px | 右侧偏移量,定义元素相对于其父元素右边线的距离 |
(3)小结:
定位模式 | 是否脱标 | 移动位置 | 是否常用 |
---|---|---|---|
static静态定位 | 否 | 不能使用边偏移 | 很少 |
relative 相对定位 | 否(占有位置) | 相对于自身位置移 | 常用 |
absolute绝对定位 | 是(不占有位置) | 带有定位的父级 | 常用 |
fixed 固定定位 | 是(不占有位置) | 浏览器可视区 | 常用 |
sticky粘性定位 | 否(占有位置) | 浏览器可视区 | 当前阶段少 |
2.定位叠放次序z-index
在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)语法:
选择器 { z-index: 1: }
●数值可以是正整数。负整数或0,默认是auto,数值越大,盒子越靠上
●如果属性值相同,则按照书写顺序,后来居上数字后面不能加单位
●只有定位的盒子才有z-index属性 3.绝对定位的盒子居中 加了绝对定位的盒子不能通过margin:0 auto
水平居中,但是可以通过以下计算方法实现水平和垂直居中:
left:50%;
:让盒子的左侧移动到父级元素的水平中心位置。
margin-left:-100px;
:让盒子向左移动自身宽度的一半。