web前端第三周学习
- 四十六、标签群组通配等选择器
- 四十七、层次选择器
- 四十八、属性选择器
- 四十九、hover等伪类选择器
- 五十、after等伪类选择器
- 五十一、结构伪类选择器
- 五十二、CSS样式的继承
- 五十三、单一样式的优先级
- 五十四、important群组等优先级
- 五十五、层次的优先级
- 五十六、CSS盒子模型
- 五十七、box-sizing改变盒模型
- 五十八、盒模型之margin叠加问题
- 五十九、盒模型之margin传递问题
- 六十、css盒子模型之扩展
- 六十一、盒子模型的嵌套练习
- 六十二、按类型划分标签
- 六十三、按内容划分标签
- 六十四、按显示划分标签
- 六十五、display显示框类型
- 六十六、标签嵌套规范
- 六十七、overflow溢出隐藏
- 六十八、透明度与手势
四十六、标签群组通配等选择器
标签选择器(TAG选择器)
div{ }
使用的场景:去掉某些标签的默认样式时
复杂的选择器中,如:层次选择器群组选择器(分组选择器)
可以通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用。
通配选择器
*( ) → div ,ul , li ,p ,h1 ,h2
注:尽量避免使用通配选择器,因为会给所有的标签添加样式。
使用场景:去掉所有标签的默认样式时。
四十七、层次选择器
后代 M N { }
父子 M>N { } 当前M下面所有N标签
兄弟 M + N { } 当前所有相邻的N标签
<style>
div ~ h2 {background-color: aqua;}
</style>
</head>
<body>
<div>我是第一行</div>
<p>我是第二行</p>
<h2>我是第三行</h2>
</body>
四十八、属性选择器
M[attr] { }
= : 完全匹配
*= :部分匹配
^= :起始匹配
$= :结束匹配
[ ] [ ] [ ] :组合匹配
<style>
div[class*=公]{background-color: blue;}
div[class$=狮子]{border-style: dotted; border-color: brown;}
</style>
</head>
<body>
<div class="母狗">我是第一行</div>
<div class="公狮子">我是第2行</div>
<div class="公狗">我是第3行</div>
<div class="公象">我是第4行</div>
<div class="母狮子">我是第5行</div>
四十九、hover等伪类选择器
:link → 访问前的样式
:visited → 访问后的样式
:hover → 鼠标移入时的样式
:active → 鼠标按下时的样式
<style>
div{background-color: red;}
div:hover{background-color: blue;}
div:active{background-color: green;}
</style>
</head>
<body>
<div>帅哥看见红色,丑鬼看见蓝色</div>
</body>
五十、after等伪类选择器
:after
:before
:checked
:disabled
:focus
<style>
div::ter{content: "world"; color: brown;}
</style>
</head>
<body>
<div>hello</div>
五十一、结构伪类选择器
:nth-of-type()、 :nth-child()
first-of-type、 :first-child
last-of-type、 :last-child
only-of-type、 :only-child
li:nth-of-type(2n+1) → 指定奇数行
五十二、CSS样式的继承
文字相关的样式可以被继承
布局相关的样式不能被继承
(默认是不能继承的,但可以设置继承属性inherit值)
五十三、单一样式的优先级
style行间 > id > class > * > 继承
权重:style行间:1000
id:100
class:10
tag:1
五十四、important群组等优先级
标签 + 类 > 单类
五十五、层次的优先级
1.权重比较
ul li .box p input{ } → 1+1+10+1+1
2.约分比较
约去等级一样的
五十六、CSS盒子模型
content物品 → padding填充物 → border包装盒 → margin盒子与盒子之间的间距
content:内容区域 → width和height组成的
padding:内边距(内填充)
只写一个值:30px(上下左右)
写两个值:30px 40px(上下、左右)
写四个值:30px 40px 50px 60px(上、下、左、右)
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom
margin:外边距
margin-left
margin-right
margin-top
margin-bottom
margin负值可以做区块覆盖。
五十七、box-sizing改变盒模型
盒尺寸,可以改变盒子模型的展示形态。
默认值:content-box : width、height → content
border-box : width、height → content padding border
使用的场景:1.不用再去计算一些值
2.解决一些100%的问题
五十八、盒模型之margin叠加问题
盒子模型的一些问题
margin叠加问题,出现在上下margin同时存在的时候。(左右没有这个问题)
解决方法:只给一个元素添加间距。
<style> .box1{width: 200px; height: 200px; background-color: red;} .box2{width: 50px; height: 50px; background-color: green;} .box3{width: 50px; height: 50px; background-color: saddlebrown; margin-top: 100px;} .box4{width: 50px; height: 50px; background-color: gold; margin-left: 150px; margin-top: -50px;} .box5{width: 50px; height: 50px; background-color: blue; margin-left: 150px; margin-top: -200px; } </style> <div class="box1"> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </div>
五十九、盒模型之margin传递问题
六十、css盒子模型之扩展
margin左右自适应是可以的,但是上下自适应是不行的。
六十一、盒子模型的嵌套练习
<style>
#b1{width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
#b2{border: 5px #d7effe solid; padding: 20px;}
#b3{background: #ffa0df; padding: 41px;}
#b4{border: 1px white dashed; padding: 3px;}
#b5{border: 1px white dashed; padding: 49px;}
#b6{border: 100px; height: 100px; background: #96ff38; border: #fcff00 5px solid;}
</style>
六十二、按类型划分标签
六十三、按内容划分标签
六十四、按显示划分标签
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
img 、input …
非替换元素:将内容直接告诉浏览器,将其显示出来。
div 、h1 、p …
六十五、display显示框类型
六十六、标签嵌套规范
六十七、overflow溢出隐藏
<style>
div{width: 300px; height: 200px; border: 1px black solid; overflow: hidden;}
</style>
overflow:
visible: 默认
hidden: 隐藏
scroll: 滚动
auto: 自动
六十八、透明度与手势
opacity:0(透明)~ 1(不透明) 0.5(半透明) → (对(div)块中的所有内容)
rgba(255,0,0,0.5) 半透明红色 → (可对背景)
cursor:手势
cursor : pointer ; →鼠标移入时呈手指状