#流式布局
流式布局 ，就是百分比布局
高度的百分比，是基于父元素的百分比进行渲染，因此使用百分比作为比较高度，他的父级必须定高
特殊属性的百分比
元素的margin-top、margin-bottom、padding-top、padding-boddom
他们的百分比都是基于父元素宽度的百分比
line-height 如果设置百分比，不是基于父元素的lien-height值，而是基于自己字号本身的百分比
媒体查询
媒体查询 根据不同设备的宽度，设置不同的样式，关键字是 @media
属性
only 指的是只针对某一种设备
not 不针对某一种设备
screen 电脑屏幕，手机，ipad 设备中的一种，print 打印机，
speech 盲人听读机，all 指的是所有
and 链接后面括号中条件的关键字，and的左右两边必须有空格
() 在括号里面可以设置条件，他里面的条件一般都是 max-width min-width 的设置
{} 满足条件的时候，设置css样式必须书写在 {} 中
注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在
媒体查询的前面这样才不会覆盖媒体查询的样式
代码如下
@media only screen and (max-width:800px) and (min-width:600px){
.wp{
height: 150px;
}
.left{
background: #ccc;
}
}
外部引入媒体查询
- html页面
<link rel="stylesheet" href="./css/base.css">
<!-- 外部引入媒体查询的写法 -->
<link rel="stylesheet" href="./css/c800.css" media="only screen and (min-width:800px)
and (max-width:1000px)">
<link rel="stylesheet" href="./css/c1000.css" media="only screen and (min-width:1000px)">
</head>
<body>
<div class="wp">
<div class="l"></div>
<div class="r"></div>
</div>
</body>
- css页面
*{
margin: 0;
padding: 0;
}
.wp{
display: flex;
height: 200px;
}
.l{
width: 200px;
background: #F00;
}
.r{
flex: 1;
background: #f0f;
}
c800
.l{
background:#04be02;
}
c1000
.l{
background: #000;
}
属性选择器
属性选择器
以下 E 代表标签名，attr 表示属性名(例：class), val 表示属性值(例"abc")
1.E[attr] 选择所有具有attr 属性的 E 元素
2.E[attr=val] 选择所有具有attr 属性并且他的值是val的 E 元素
3.E[attr~=val] 选择所有具有attr 属性并且他的值包含 val 的 E元素
4.E[attr|=val] 选择所有具有attr 属性并且他的值 是以val 或 val- 开头的 E元素
5.E[attr*=val] 选择所有具有attr 属性并且他的值具有 val 字符的E元素
6.E[attr$=val] 选择所有具有attr 属性并且他的值是以 val 字符结束的 E元素
7.E[attr^=val] 选择所有具有attr 属性并且他的值是以 val 字符开始的 E元素
ul{
list-style-type: none;
}
li[title]{
color: #f00;
}
li[class="abc"]{
border: 1px #f00 solid;
}
/* 属性class 的值中包含show */
li[class~="show"]{
width: 200px;
height: 200px;
background: #04be02;
}
/* 属性class 的值中的字符以 abc开头或者abc-开头 */
div[class|="abc"]{
font-size: 30px;
color: #f00;
}
/* 属性class 值中的字符含有bc */
div[class*="bc"]{
border: 1px #f00 solid;
margin: 10px 0;
}
/* 属性class 的值中以 li 开头 */
div[class^='li']{
color: #04be02;
}
/* 属性class 的值中以 d 结尾 */
div[class$='d']{
color: #1018f0;
}
/* 给所有的文本输入框设置样式 */
input[type="text"]{
color: #04be02;
}
div.cd{
color: #f60;
}
<ul>
<li title="剪不断" class="abc">剪不断</li>
<li class="ab">理还乱</li>
<li title="是离愁" class="ab show">是离愁</li>
<li class="abc show">别是一番滋味在心头</li>
</ul>
<div class="li abc">米饭</div>
<div class="abc">面条</div>
<div class="ab cd">火鸡面</div>
<div class="abc-li">老母鸡汤</div>
伪类选择器
focus(聚焦) 为所有获取焦点的input设置样式
disabled 为所有被禁用的input设置样式
：target 目标伪类选择器，当跳转到他所修饰的元素时才会执行该选择器修饰的样式
root 表示的是 html
E:empty 选中所有内容为空的E标签，并添加样式
:empty 选中所有内容为空的E标签，并添加样式
E:only-child 选中父元素中只有一个E标签的 E标签，并添加样式，独生子标签
/* 为所有获取焦点的input设置样式 */
input[type="text"]:focus{
width: 200px;
height: 30px;
padding-left: 10px;
}
/* 为所有禁用的input设置样式 */
input:disabled{
border: 1px #f00 solid;
}
/* */
:target{
color: aqua;
}
:root{
border: 2px #00f solid;
}
div:empty{
border: 1px#5dc25f solid;
width: 100px;
height: 100px;
}
:empty{
background: #ccc;
}
/* 独生子 父级只有一个子集的标签 */
div:only-child{
font-size: 30px;
}
<div class="tar" id="tar">孤勇者</div>
<input type="text" value=""><br>
<input type="text" value=""><br>
<input type="text" value="" disabled><br>
<input type="text" value=""><br>
<a href="#tar">跳到孤勇者</a>
<div></div>
<div>逆战</div>
<div>
<div>青春修炼手册</div>
</div>
<div>
<div>九妹</div>
<div>大花轿</div>
</div>
#伪元素选择器
伪元素选择器：通过伪元素选择器可以给元素添加一个类似子元素的内容，不是真正的标签
使用伪元素需要添加双冒号::
::first-letter 表示修改第一个字符
::first-line 表示修改第一行字符
::before 在元素内容的最前面添加一个伪元素
::after 在元素内容的最后面添加一个伪元素
.txt{
border: 1px #f00 solid;
line-height: 30px;
}
/* 修改第一个字符 */
.txt::first-letter{
font-size: 30px;
color: rgb(13, 241, 165);
}
/* 修改第一行字符 */
.txt::first-line{
font-size: 20px;
color: #f00;
}
/* 在元素内容的最前面添加一个伪元素 */
.cont::before{
content: '张杰';
border: 1px #f00 solid;
font-size: 30px;
color: rgb(100, 89, 251);
display: block;
}
/* 在元素内容的最前面添加一个伪元素 */
.cont::after{
content: '谢娜';
border: 1px #f00 solid;
font-size: 30px;
color: rgb(97, 97, 250);
}
<div class="txt">跟着我左手右手一个慢动作跟着我左手右手一个慢动作跟着我左手右手一个慢动作
跟着我左手右手一个慢动作跟着我左手右手一个慢动作</div>
<div class="cont">逆战逆战狂野</div>
结构伪类选择器
父级 E： nth-child(num) 选中同一个父级下，排名次序为num 的E元素
num 从1 开始
使用n 表达式，设置选中的标签，n 从0 开始计算
偶数使用 2n
E： nth-child(2n)
奇数
E： nth-child(2n+1)
也可以使用 odd 表示奇数， even 表示偶数
E: nth-last-child(num) 表示从后开始往前数，使用方式和 nth-child 一样，也就是倒着计算
代码
ul>li:nth-child(2){
background: rgb(226, 156, 110);
}
ul>li:nth-child(6){
background: rgb(176, 208, 117);
}
/* 设置第十个li没有margin */
ul li:nth-child(10){
margin-bottom: 0;
}
/* 所有偶数变色 */
ul li:nth-child(2n){
background: #97b1f1;
}
/* 所有奇数变色 */
ul li:nth-child(odd){
background: #f5c4f3;
height: 60px;
}
ul li:nth-last-child(2){
font-size: 30px;
}
结构伪类选择器2
如果父元素中的子元素不是同一个类型，则不能使用 nth-child(num) 来设置css,因为匹配到底元素不对
使用 nth-of-type(num) 来匹配元素，他的意思是，找到和E标签同类型的第num个元素
E:nth-last-of-type(num) 使用方法和 nth-of-type 一样，只是倒着数
代码
/* 第二个p标签变色 */
.cont p:nth-of-type(2){
font-size: 50px;
color: rgb(236, 163, 163);
}
/* 第二个span标签变色 */
.cont span:nth-of-type(2){
font-size: 40px;
color: rgb(132, 148, 242);
}
/* 最后一个span变色 */
.cont span:nth-last-of-type(1){
font-size: 50px;
color: aquamarine;
}
2229
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
