提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 四十六、标签群组通配等选择器
- 四十七、层次选择器
- 四十八、属性选择器
- 四十九、hover等伪类选择器
- 五十、after等伪类选择器
- 五十一、结构伪类选择器
- 五十二、css样式的继承
- 五十三、集、单一样式的优先级
- 五十四、important群组等优先级
- 五十五、层次的优先级
- 五十六、css的盒子模型
- 五十七、box-sizing改变盒模型
- 五十八、盒模型之margin叠加问题
- 五十九、盒模型之margin传递模型
- 六十、css盒子模型之扩展
- 六十一、盒子模型之嵌套练习
- 六十二、按类型划分标签
- 六十三、按内容划分标签
- 六十四、按显示划分标签
- 六十五、display显示框类型
- 六十六、标签嵌套规范
- 六十七、overflow溢出隐藏
- 六十八、透明度与手势
- 六十九、最大最小宽高
- 七十、css默认样式
- 七十一、css(rest)重置样式
- 七十八、float浮动概念及原理
- 七十九、float注意点整理
- 八十、清除float浮动(上)
- 八十一、清除float浮动(下)
- 八十二~八十三、float制作页面小结构
四十六、标签群组通配等选择器
标签选择器(TAG选择器)div <div></div>
1.去掉某些标签默认样式
2、复杂的选择器,如:层次选择器
群组选择器(分组选择器)
通过逗号的方式,给多个不同的选择器添加统一的css样式,达到代码复用
通配选择器*{}
*{}->div,ul,li,p,h1,h2…{}
注:慎用,是给所有标签加上样式
<style>
/* div,#text,.title{background-color:green } */
*{border:1px red solid;}
</style>
</head>
<body>
<div>啦啦啦</div>
<p id="text">啊哈哈哈</p>
<h2 class="title">噢噢噢噢</h2>
四十七、层次选择器
47.1后代 M N
<style>
#list li{border:1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
47.2父子M>N
<style>
#list> li{border:1px red solid;}
</style>
</head>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
47.3兄弟M~N
当前M下面所有N标签
<style>
div~h2{background:red}
</style>
</head>
<body>
<div>这是一个标签</div>
<h1>这是一个标题</h1>
<p>只是啦啦啦</p>
47.4相邻M+N
当前M下面的相邻的N标签且M自身不会被选中
<style>
div+h1{background:red}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<div>这是一个标签</div>
<h1>这是一个标题</h1>
<p>只是啦啦啦</p>
<h1>这是一个标题</h1>
四十八、属性选择器
M[attr]{}
=:完全匹配
*=:部分匹配
^=:起始匹配
$=:结束匹配
[][][]:组合匹配
<style>
div[class][id]{background:red}
</style>
</head>
<body>
<div>啊啊</div>
<div class="box" id="elem">bbbb</div>
<div class="search">cccc</div>
<div class="search-buttom">dddd</div>
四十九、hover等伪类选择器
M:伪类{}
:link 访问前的样式(只能添加给a标签)
:visited 访问后的样式(只能添加给a标签)
:hover 鼠标移入时的样式(可以添加给所有的标签)
:active 鼠标按下时的样式(可以添加给所有的标签)
div{width:200px;height:200px;background:red }
div:hover{background:blue;}
div:active{background:green;}
<style>
a:link{color:red}
a:visited{color:blue }
a:hover{color:yellow}
a:active{color:grey}
</style>
</head>
<body>
<a href="#">这是一个标签</a>
Chrome缓存清除shift+ctrl+delete
注:一般的网站只设置a{} (link visited action)a:hover{}
五十、after等伪类选择器
用伪类的方式给元素添加一段文本内容:after :befor
使用content
属性,给单独的字加上样式
<style>
div:after{content:"world";color:red }
</style>
</head>
<body>
<div>hello</div>
:checked、:disabled、:foucs(获取光标)都是针对表单元素
<style>
/* :checked{width:100px;height:100px;} */
:disabled{width:100px;height: 100px;} *
:focus{background:red}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" disabled>
<input type="text">
五十一、结构伪类选择器
type是类型,child是孩子
<style>
/* li:nth-of-type(2n+1){background:red ;} */
/* li:nth-of-type(2n){background:blue } */
/* li:first-of-type{background:red} */
/* li:last-of-type{background:blue } */
/* li:only-of-type{background:red } */
/* li:nth-child(3){background:red } */
div:only-of-type{background:red }
</style>
</head>
<body>
<ul>
<li></li>
<div>啊啊啊啊</div>
<li></li>
<li></li>
<li></li>
</ul>
五十二、css样式的继承
文字相关的样式可以继承(行高,颜色,大小)
布局相关样式不能被继承(width、height、border)
默认是不能继承的,但是可以设置inherit值
<style>
div{width:300px;height:300px;
border:1px red solid ;
color:red;font-size: 30px;}
/* 设置文字属性 */
p{border:inherit;}
</style>
</head>
<body>
<p>这是一个段落</p>
五十三、集、单一样式的优先级
1、同时设置同样或同等级,后写进的优先级高
2、单一样式优先级
style行间>id>class>tag(标签:div)>*(通配)>继承
3、注:
style行间 权重1000
id 权重100
class 权重10
tag 权重1
<style>
/* #elem{color:red} */
/* .box{color: blue } */
/* div{color:red } */
/* *{color:blue } */
body{color:blue }
</style>
</head>
<body>
<div id="elem" class="box">这是一个块</div>
五十四、important群组等优先级
1、!important
提升样式优先级,非规范方法,不建议使用
(不能针对继承属性进行优先级提升)
2、标签+类>单类
div.box{color:blue;}(先)
.box{color:red;}
3、群组
div{color:blue}
div,p{color:red;}(先)
群组选择器与单一选择器的优先级相同,靠后写的优先级高
五十五、层次的优先级
1、权重比较
ul、li、box、p、input{} 1+1+10+1+1
.hello、span、#elem{} 10+1+100
注:100个ul不比1个class更优先
2、约分比较
ul、li、.box、p、input{}
.hello、span、#elem{}
五十六、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:外边距(外填充)
只写一个值:30px(上下左右)
写俩个值 :30px 40px(上下、左右)
写四个值:30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
margin-left
margin-right
margin-top
margin-bottom
注:1、背景色填充到margin以内的区域(不包括margin区域)
2、文字在content区域添加
3、padding不能为负数,但margin可以为负数
<style>
#box{
width:200px;height:200px;background:red ;
border:10px blue solid;
padding:30px 50px;
margin:-10px;
}
#box2{
width:200px;height:200px;background:black ;
color:white
}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<div id="box2">又是一个盒子</div>
五十七、box-sizing改变盒模型
57.1border-box
盒尺寸:改变盒子模型的展现形态
默认值:content-box:width、height->content
border-box:width、height->content padding border
使用场景:
1、不用再去计算一些值
2、解决一些100%问题
<style>
#box{
width:200px;height:200px;background:red ;
border:10px blue solid;
padding:30px 50px;
}
input{
width:100%;padding:30px;
box-sizing:border-box;
}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<input type="text">
五十八、盒模型之margin叠加问题
1、BFC规范
2、只设置一个最大的
<style>
#box{
width:200px;height:200px;background:red ;
border:10px blue solid;
margin-bottom:0px;
}
#box2{
width:200px;height:200px;background:red ;
border:10px blue solid;
margin-top:70px;
}
</style>
</head>
<body>
<div id="box"></div>
<div id="box"></div>
五十九、盒模型之margin传递模型
59.1margin传递问题
margin传递问题只出现在嵌套结构中,
只有margin-top有传递问题
解决方案
1、BFC规范
2、给父容器加边框
3、margin换成padding
<style>
#box1{
width:200px;height:100px;background:red ;
padding-top:100px;
}
#box2{
width:100px;height:100px;background:blue ;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
六十、css盒子模型之扩展
60.1margin自适应居中
左右自适应
<style>
#box1{width:300px;height:300px;background:red;}
#box2{width:100%;height:100px;background:blue;
color:white;
padding-left:30px;
border-left:10px black solid}
</style>
</head>
<body>
<div id="box1">
<div id="box2">啦啦啦啦</div>
</div>
60.2不设置content的现象
自动会计算
#box1{width:300px;height:300px;background:red;}
#box2{height:100px;background:blue;
color:white;
padding-left:30px;
border-left:10px black solid
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">啦啦啦啦</div>
</div>
六十一、盒子模型之嵌套练习
<style>
#box1{width:350px;height:350px;
border:1px black dashed;
padding:27px;}
#box2{border:5px #d7effe solid;padding:20px;}
#box3{background: #ffa0df;padding:41px;}
#box4{border:1px white dashed;padding:3px;}
#box5{border:1px white dashed;padding:49px;}
#box6{width:100px;height:100px;
background:#96ff38 ;
border:#fcff00 5px solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6"></div>
</div>
</div>
</div>
</div>
</div>
六十二、按类型划分标签
62.1block(块)
:div、p、ul、li、h1…
1、独占一行
2、支持所有样式
3、不写宽时,跟父元素的宽相同
4、所占区域是一个矩形
<style>
#box1,#box2{/*width:100px;*/ height:100px;
background:red;}
</style>
</head>
<body>
<div id="box1">块1</div>
<div id="box2">块2</div>
62.2inline(内联)
:span、a、em、strong、img…
1、挨在一起的
2、有些样式不支持,例如:width,height,margin,padding
3、不写宽时,宽度由内容决定
4、不一定是个矩形
注:布局一般用块标签,修饰一般用
<style>
body{font-size: 0;}
#content1,#content2{width:100px;height:100px;
background:red ;
font-size:16px}
</style>
</head>
<body>
<span id="content1">内联1内联1内联1内联1内联1内联1</span>
<span id="content2">内联2</span>
62.3inline-block(块内联)
1、挨在一起,支持宽高
:input、select…
<style>
/* body{font-size: 0;} */
#content1,#content2{width:100px;height:100px;
background:red ;
font-size:16px}
input{width:100px;height:100px;}
</style>
</head>
<body>
<span id="content1">内联1内联1内联1内联1内联1内联1</span>
<span id="content2">内联2</span>
<input type="text">
<input type="text">
六十三、按内容划分标签
流内容:Flow
元数据:Metadata
分区:Sectioning
标题:Heading
嵌入的:Embedded
互动的:Interative
六十四、按显示划分标签
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容
input、img(可设置宽高)
非替换元素:将内容直接告诉浏览器,将其显示出来
div、h1、p…
六十五、display显示框类型
display:block、inline、inline-block、none…
display不占内存
visibility:hidden占空间
<style>
/* div{width:100px;height:100px;background:red;
display:inline-block;}
span{width:100px;height:100px;background:red;
display:inline-block;}
input{display:none }*/
#box2{width:100px;height:100px;background:red;}
/* #box1{width:100px;height:100px;background:red;
visibility: hidden;} */
#box1{width:100px;height:100px;background:red;
display:none;}
</style>
</head>
<body>
<!-- <div>块1</div> -->
<!-- <div>块2</div> -->
<!-- <span>内联1</span> -->
<!-- <span>内联2</span> -->
<!-- <input type="text"> -->
<div id="box1">块1</div>
<div id="box2">块2</div>
六十六、标签嵌套规范
ul、li
dl、dt、dd、
table、tr、td、
块能嵌套内联
<div>
<span></span>
<a href=""></a>
</div>
块嵌套块
<div>
<div></div>
</div>
错误写法:在<p>标签内添加
内联不能嵌套块
特殊:<a href="">
<div></div>
</a>
六十七、overflow溢出隐藏
visible:默认
hidden
scroll
auto
x轴、y轴
<style>
/* div{width:300px;height:300px;
border:1px black solid;overflow:hidden}
div{width:300px;height:300px;
border:1px black solid;overflow:scroll}
div{width:300px;height:300px;
border:1px black solid;overflow:auto}*/
div{width:100px;height:100px;
border:1px black solid;
overflow-x:scroll;overflow-y:auto}
</style>
</head>
<body>
<div>
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>
六十八、透明度与手势
1.opacity:0(透明、站空间)~1(不透明)
0.5(半透明)
注:opacity所占空间、字内容也会透明
2.rgba():0~1
注:可以让指定样式透明,不影响其它样式
3.cursor:手势
default:默认箭头
要实现自定义手势
准备图片:.cur .ico
cursor: url(./img/.cur),auto
<style>
#div1{width:100px;height:100px;
background:red ;opacity:0.5;}
#div2{width:100px;height:100px;
background:rgba(255,0,0,0.5);
/* cursor:help; */
cursor: url(./img/.cur),auto;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<p>这是</p>
<div id="div2">这又是一个块</div>
六十九、最大最小宽高
min-width、min-height
max-width、max-height
%单位:换算–>父容器的大小进行换算
html,body{height:100%}
.contrainer{height:100%}
<style>
/*body{height:100px}
/* div{width:100px;max-height:200px;
border :red solid;}*/
#box1{width:200px;height:200px;background:red}
#box2{width:200px;height:80%;background:blue}
</style>
</head>
<body>
<!-- <div>这是一罐啦啦啦 -->
<!-- 这是一罐啦啦啦 -->
<!-- 这是一罐啦啦啦</div> -->
<div id="box1">
<div id="box2"></div>
</div>
七十、css默认样式
没有默认样式:div、span
有默认样式:
body–>marign:8px
h1–>margin:上下 21.440px
font-weight:bold
p–>margin:上下 16px
ul–>margin:上下 16px padding:左40px
默认点:list-style:disc
a–>text-decoration:underline
七十一、css(rest)重置样式
1、{margin:0;padding:0;}*
优点:不用考虑哪些标签有默认margin和padding
可自行添加
2、ul{list-style:none}
3、a{text-decoration:none;color:#999;}
ul{list-style:none}
a{text-decoration:none;color:red}
a:hover{text-decoration:underline;color:blue}
</style>
</head>
<body>
<div>致死</div>
<span></span>
<h1></h1>
<p></p>
<ul>
<li></li>
</ul>
<a href="#">这是一个链接</a>
4、img{display:block}
让内联元素与基线对齐方式:
img{vertical-align:bottom}
img {display:block;}
5、写具体页面的时候或一个布局效果的时候
1、写结构
2、css重置样式
3、写具体样式
常见的CSSrest
七十八、float浮动概念及原理
<style>
#box1{width:100px;height:100px;
background:red;float:right}
#box2{width:100px;height:100px;
background:blue;float:both}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
七十九、float注意点整理
<style>
/* body{border:1px black solid}
#box1{width:100px;height:100px;
background:yellow}
#box2{width:200px;height:200px;
background:red ;float:left }
#box3{width:300px;height:300px;
background:blue }
#box4{background:green;float:left }*/
ul{margin:0;padding:0;list-style:none;
height:300px;width:300px;border:1px black solid }
li{width:100px;height:100px;background:red;
border:1px yellow solid;box-sizing:border-box;
float:left}
li:nth-of-type(1){height:120px;}
li:nth-of-type(2){height:80px;}
span:last-of-type{float:right;}
</style>
</head>
<body>
<!-- <div id="box1"></div>
<div id="box2"></div>
<div id="box3">文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文
字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字</div>
<div id="box4">这是一个没有宽度的块元素</div>-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>aaaa</span><span>bbbb</span>
八十、清除float浮动(上)
<style>
/* #box1{width:100px;height:100px;background:red;
float:left;}
#box2{width:200px;height:200px;background:blue;
clear:both;}*/
#box1{width:200px;border:1px black solid;
display:inline-block;}
#box2{width:100px;height:200px;background:red;
float:left;}
</style>
</head>
<body>
<!-- <div id="box1"></div>
<div id="box2"></div>-->
<div id="box1">
<div id="box2"></div>
</div>
aaaaaaa
八十一、清除float浮动(下)
<style>
#box1{width:200px;border:1px black solid;}
#box1{width:100px;height:200px;background:red;
float:left;}
.clear:after{content:'';clear:both;
display:block;}
</style>
</head>
<body>
<div id="box1" class="clear">
<div id="box2"></div>
</div>
aaaaaaa
八十二~八十三、float制作页面小结构
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
img{display:block;}
a{text-decoration:none;color:#666}
h1,h2,h3{font-size:16px;}
.l{float:left;}
.r{float:right;}
.clear:after{content:"";display:block;clear:both;}
#main{width:366px;margin:20px auto;}
#main.title{height:23px;line-height:23px;
font-size:12px;font-weight:bold;padding-left:30px;
background:url(./img2/bg_title.png)no-repeat 6px
4px,url(./img2/bg_line.png)repeat-x;
}
#main ul{overflow:hidden;margin-top:13px;}
#main li{margin-bottom:22px;}
#main.pic{width:99px;border:1px solid #c8c4d3;
margin-left:5px;}
#main .pic img{margin:2px;}
#main .content{width:240px;margin-left:13px;}
#main .content h2{font-size:12px;line-height:24px;}
#main .content p{font-size:12px;line-height:20px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title">外媒评论精选</h2>
<ul>
<li>
<div class="1 pic">
<a href="#">
<img src="" alt="">
</a>
</div>
<div class="1 content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落
测试段落测试段落测试段落测试段落
<a href="#">[详细]</a>
</p>
</div>
</li>
<li>
<div class="1 pic">
<a href="#">
<img src="" alt="">
</a>
</div>
<div class="1 content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落
测试段落测试段落测试段落测试段落
<a href="#">[详细]</a>
</p>
</div>
</li>
<li>
<div class="2 pic">
<a href="#">
<img src="" alt="">
</a>
</div>
<div class="2 content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落
测试段落测试段落测试段落测试段落
<a href="#">[详细]</a>
</p>
</div>
</li>
<li>
<div class="3 pic">
<a href="#">
<img src="" alt="">
</a>
</div>
<div class="3 content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落
测试段落测试段落测试段落测试段落
<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>