css特性
优先级
不同选择器具有不同的优先级 优先级高的选择器样式会覆盖优先级低的选择器样式
优先级公式
继承<通配符选择器(*)<标签选择器<类选择器<id选择器<行内样式<!important
作用域越广优先级越低
!important 写在属性值后面,分号的前面
!important不能提升继承的优先级,只要是继承优先级最低
实际开发不建议用important,!important把优先级提升到最高
!important 不能给继承的添加,(无效)自己有样式就无法继承父类
权重叠加计算
如果是复合选择器 需要通过权重叠加计算方法,判断哪一个优先级最高
(0,0,0,0)
第一个0
第一级 行内样式的个数
第二个0
第二级 id选择器的个数
第三个0
第三级 类选择器的个数
第四个0
第四级 标签选择器的个数
先比较第一级,若相同就第二级,依次往下 若全部相同则比较层叠性,谁在下面用谁
都是继承,看哪一个父级高
!important如果不是继承 则权重最高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* (0,1,0,1) */
div #one{
color: orange;
}
/* 0,0,2,0 */
.father .son
{
color: skyblue;
}
/* 0,0,1,1 */
.father p{
color: #000;
}
/* 0,0,0,2 */
div p{
color: aliceblue;
}
</style>
<body>
<div class="father">
<!-- 橙色 -->
<p class="son" id="one">dasdas</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
border: 10px solid #000;
padding: 20px;
background-color:coral;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
PxCook的基本使用
png 设计
盒子模型
页面中的每一个标签都可以看做一个盒子 通过盒子的视角更方便进行布局
浏览器渲染网页时,会将网页中的元素看做一个个矩形
css中规定每个盒子由:内容区域(content) 内边距区域(padding) 边框区域(border) 外边距区域(margin)
构成
内容用width和height设置 数字+px
border 边框 bd 复合属性
border :10px solid red(3个值 solid是线条种类)
solid 实线 dashed 虚线 dotted 点线
单向设置 只给盒子的某个方向单独设置边框
border-方位名词
单独的属性
border-width 边框粗细 数字+px
border-style 边框样式
border-color 颜色
布局从外到内
内边距padding
padding属性可以当做复合属性使用,表示单独设置某个方向的内边距
4值
padding后面 上 右 下 左
3值
上 左右 下
2值
上下
左右
多值写法,顺时针方向转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 300px;
background-color:aquamarine;
border: 2px solid #000;
padding: 30px;
margin: 50px;
}
</style>
</head>
<body>
<div>
yi
</div>
</body>
</html>
宽度自动撑开
文字 利用padding增加间距
对于盒子的撑大可以自动内减
给盒子设置box-sizing :border-box
浏览器会自动计算多余大小,自动从内容减去
*{
margin:0;
padding:0;
}
清楚默认内外边距(需要)
版心指网页的有效内容
版心居中
margin:0 auto;
去除列表的符号
ul{
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box
{
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
.box a{
padding: 0 16px;
display: inline-block;
line-height: 40px;
text-align: center;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover
{
background-color: #edeef0;
color: #ff8400;
}
</style>
</head>
<body>
<div class="box">
<a href="#">新狼</a>
<a href="#">111111111111111奥</a>
<a href="#">无</a>
<a href="#">11111111111111111111器</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.news{
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2{
border-bottom: 1px solid #ccc;
font-size: 30px;
line-height: 1em;
padding-bottom: 5px;
}
ul{
list-style: none;
}
.news li{
height: 50px;
border-bottom: 1px solid #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a{
text-decoration: none;
color: #666;
font-size: 18px;
}
</style>
</head>
<body>
<div class="news">
<h2>最新文章</h2>
<ul>
<li><a href="">lili</a>
</li>
<li>
<a href="">lili</a>
</li>
<li>
<a href="">lili</a>
</li>
<li>
<a href="">lili</a>
</li>
<li><a href="">lili</a>
</li>
</ul>
</div>
</body>
</html>
外边距折叠现象
合并现象
场景:垂直布局的块级元素 上下的margin合并
最终两者的距离为margin的最大值
解决:只给一个盒子设置margin就行
塌陷现象
场景:互相嵌套的块级元素 子元素的margin-top会作用在父元素上
结果:导致父元素一起向下移动
解决
1
给父元素设置 border-top或padding-top(分隔父子元素的margin-top)
2
给父元素设置 overflow:hidden
3
转换成行内块元素
4
设置浮动
行内元素的内外边距问题(垂直)
即行内标签的paddding/margin-top bottom不生效
可以用line-height解决
结构伪类选择器
作用:根据元素在html中结构关系查找元素
优势:减少对html类的依赖,保持代码整洁
场景:常用于查找父级选择器中的子元素
选择器
E:first-child{} 匹配父元素中第一个子元素,并且是E元素
E:last-child{} 匹配父元素中最后一个子元素,并且是E元素
E:nth-child(n){} 匹配父元素中第n个子元素,并且是E元素
E:nth-last-child(n){} 匹配父元素中倒数第n个子元素,并且是E元素
n可以是公式
偶数 2n even
奇数 2n+1 2n-1 odd
前五个 -n+5
找到从第五个往后 n+5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child
{
background-color: #ffa;
}
li:nth-child(3)
{
background-color: #392c2c;
}
</style>
</head>
<body>
<ul>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-child
{
background-color: #ffa;
}
li:nth-child(3)
{
background-color: #392c2c;
}
li:nth-child(4n)
{
background-color: #f20000;
}
</style>
</head>
<body>
<ul>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
<li>zheshi1</li>
</ul>
</body>
</html>