coderwhy–前端知识整合包–html/css05

一、css属性-display

块级元素由来：display:block(所有浏览器默认添加，块级元素本就是行内级元素是因为浏览器默认添加上面那个)

1、常见取值

block：将元素设置为块级元素

inline：将元素设置为行内级元素

none：隐藏元素

inline-block：可以设置宽高的行内级元素，可以再同一行显示，具有块级元素和行内级元素特点

<head>
<style><!--这是一个选中变色效果-->ul{list-style-type: none;padding: 0;margin: 0;display: inline-block;width: 200px;height: 50px;color: #000;}a{text-decoration: none;color: #000;display: block;}.main{/* text-align: center; */border: 1px solid #000;height: 200px;width: 200px;}.one{background-color: cadetblue;display: inline-block;width: 200px;height: 50px;text-align: center;}ul li{display: inline-block;width: 200px;height: 50px;text-align: center;}ul li:hover{background-color: chocolate;}</style>
</head>
<body><!-- <div><select title="邮箱"><option value="0">腾讯</option><option value="1">baidu</option><option value="2">wangyi</option></select></div> --><div class="main"> <div class="one">mail</div><div class="two"><ul><li id="0"><a href="#">qq</a></li><li id="1"><a href="#">qq</a></li><li id="2"><a href="#">qq</a></li></ul></div></div>
</body>

img、input、ifrae->替换元素->没有说是inline-block（可以在同一行显示，可以设置宽高）


<head>
<style>ul{list-style-type: none;padding: 0;margin: 0;/* text-decoration: none; */}a{text-decoration: none;display:inline-block;width: auto;height: auto;}ul li{display:inline-block;border: 1px solid black;width: 40px;height: 40px;text-align: center;line-height: 34px;}.sl, .fl{width: auto;height: 40px;}</style>
</head>
<body><div class="page"><ul><li class="sl"><a href="#">&lt;上一页</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">10</a></li><li class="fl"><a href="#">下一页</a></li></ul></div>
</body>

二、盒子模型

1、主要内容简介：

conten内容（盒子显示的东西）、

padding内边距（内容到边框的距离）、

border边框（一个区分不同盒子的边框）、

margin外边距（一个盒子边框到另外一个盒子边框的距离）

2、盒子的content和相关属性

width、height

min-width：当浏览器显示宽度没有达到min-width标准时够时会出现滚动条，能显出来儿不是将整个内容缩放

max-width：最大显示内容不能超过300px，如果超过300px的会被换行

同理height

3、盒子的padding和相关属性

增加内边距盒子也会变大（会被计算到整个盒子大小）

缩写属性padding如果只需要设置三个值，比如上右下，那左侧就会被设置跟右侧一样的值就，若是上右左，下会被设置为跟上一样的值，谁没有谁就会被设置成与他相对的那个值

div{                   div{
padding: 20px 30px;  =     padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:30px
}                        }

4、盒子的margin和相关属性及其特点

简介

注意body有设置margin，

margin-top、right、bottom、left设置语法跟padding一样

上下margin传递-父子关系（左右不会被传递，是子传父）

上传递：如果块级元素的顶部栈和父元素顶部栈重叠，那这个块级元素margin-top会传递给父元素（说白了子元素与父元素顶部紧挨着，子元素若是设置margin-top：20px，不会显示，反而父元素会继承这个margin-top：20px，最后父元素会与其顶部元素分开20px）

下传递：如果块级元素的底部线和父元素底部线重叠，并且父元素高度为auto，那个子元素的margin-bottom会被传递

.one{
background-color:black;
width:100px;
height:100px;
}
.two{
background-color:black;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px
}
.one1{
background-color:red;
width:200px;
height:200px;
}<div class="one">
</div>
<div class="one1"><div class="two"></div>
</div>

解决方式：

父元素的padding的上下进行设置让顶部栈和底部线无法跟子元素重叠（不建议）
给父元素设置border
干脆不设置内部元素的margin，直接设置父元素padding（如果有父元素）

触发BFC

设置成浮动显示，触发
设置一个元素overflow不是visiable

.one{
background-color:black;
width:100px;
height:100px;
}
.two{
background-color:black;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px
}
.one1{
background-color:red;
width:200px;
height:200px;overflow:scorll
}<div class="one">
</div>
<div class="one1"><div class="two"></div>
</div>

折叠特性-兄弟特性（外边距塌陷）

垂直方向相邻的两个margin（top和bottom）可能会合并成一个margin这叫折叠（左右永远不会出现折叠）

举例：top：20px bottom：20px，最终20px；top：30px，bottom：20px，最终30px；top：20px，bottom：30px，最终30px；结论，最后显示结果是去两者之间最大值。

解决方式：以后只设置一个要么top要么bottom

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEgoCMU4-1600922604306)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200716201148007.png)]

折叠实用性：段落之间保持唯一

5、盒子的border和相关属性及其特点

边框宽度：

border-top-width、border-right-width、border-bottom-width、border-left-width

缩写属性:border-width

边框颜色：

border-top-color、border-right-color、border-bottom-color、border-left-color

缩写属性:border-color

边距样式和取值：

border-top-style、border-right-style、border-bottom-style、border-left-style、

缩写属性:border-style

取值：none、dotted（细虚线） dashed（粗虚线） soild（单实现） double（双实线） groove（外部border凹陷） redge（外部border突出） inset(凹陷) outset（突出）

边框形状：

    <style>.one{display: inline-block;border-top: 50px solid black;border-right: 50px solid olive;border-bottom: 50px solid rebeccapurple;border-left: 50px solid green;}</style>
</head>
<body><div class="one"></div>
</body>

        .two{height: 0;width: 0;border-width: 50px;border-style: solid;border-top-color:springgreen;border-bottom-color:transparent;border-right-color:springgreen;border-left-color: transparent;transform: rotate(-45deg);}<div class="two"></div>
<!--旋转的三角形-->

boder的圆角效果

所谓的圆角实为椭圆，所以设置时是这样的border-top-left-radius: 20px 30px;两个值(相对应水平半径、垂直半径)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fSfVzApf-1600922604308)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200716210934273.png)]

border-radius:50px=border-top-left-radius:50px 50px;border-top-right-radius:50px 50px;border-bottom-left-radius:50px 50px;border-bottom-right-radius:50px 50px;

顺序为顺时针：上左、上右、下右、下左

    .three{width: 200px;height: 100px;background-color: tomato;border-radius: 50px;}
<div class="three">
</div>

<!--设置一个圆-->.three{width: 100px;height: 100px;background-color: tomato;border-radius: 50px;<!--border-radius:50%    这个属性大于或等于50%救是一个圆前提div宽高相等-->}
<div class="three">
</div>

6、outline属性

不占用空间，默认显示在border外边（可以用来加到别人网站上获取布局明显，用以模仿学习）

我感觉可以理解为下面第五大部分行内非替换元素注意点的padding-top、padding-bottom

相关属性有：outline-width、outline-style（跟border取值一致）、outline-color

缩写属性outline：使用方式跟其他缩写属性保持一致

7、box-shadow属性

给一个盒子设置阴影

        .box{
margin: 0 auto
<!--居中-->width: 100px;height: 100px;background-color: red;box-shadow: -5px -5px 2px 5px gold inset;
<!--左右 上下 模糊半径 衍生半径（向四周伸缩五像素） 阴影颜色 向内部扩散阴影（可以不写）；便宜数字为正数分别代表右和下，负数为左和上-->}</style>
</head>
<body><div class="box"></div>
</body>

<!--为一个块级元素只有上面不要阴影-->
<!--方法一-->
.box{width: 100px;height: 100px;border: 1px soild organge;box-shadow:-10px 10px 5px,10px 10px 10px;<!--阴影可以多次设置，加逗号就行，但这样下面的阴影会加深-->
}
<!--方法二-->
.box{width: 100px;height: 100px;border: 1px soild organge;box-shadow:0 5 5 rgb（0,0,0，.1）,
}

    <style>.box{width: 100px;height: 200px;border: 0.5px solid aquamarine;box-shadow: -1px 1px 1px,1px 1px 1px;margin: 0 auto;}.box-first{background-color: aquamarine;width: 100px;height: 50px;}</style>
</head>
<body><div class="box"><div class="box-first"></div><div class="box-second"></div></div>
</body>

8、text-shadow属性（文字阴影）

用法跟上面的box-shadow一样，不演示了

9、box-sizing属性

为什么不用width和height？

box-sizing有很多值，这里只举例border-box和content-box；

box-sizing的默认值是content-box（内容盒子），

.box{
width:200px;
height:200px;padding-bottom:20px;
border-bottom:20px soild red;<!--在css里没有设置这个box-sizing时，默认设置的宽高是盒子的content(内容)宽高，所以当我们加入他的padding或者border时是会额外占据其他空间，比如上面，这个盒子宽高将变成240-->
box-sizing:content-box
<!--而当我们设置box-sizing为border-box时，此时css里的宽高将变成content+padding+border，为盒子的真实宽高，无论border和padding设置为多少，这个盒子永远是200px的宽高-->
box-sizing:border-box
}

三、背景

1、背景图片

不作为内容撑起块元素（块元素没有宽高就不显示，若是图片铺不满夸元素就多次显示铺满背景）

针对平铺：background-repeat：repeat-x（这里是指水平平铺）

norepeat(不平铺)、repeat-x（水平）、repeat-y（竖直）

.box{
background-image:url('../jk.jpg'),url('../kkk.jpg')
/*图片无上限，按照顺序平铺显示，若第n张比前面都要高或者宽，那就会替代前面平铺*/
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKfYzZas-1600922604310)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200718210443981.png)]

2、background-size属性

cover：对背景图片拉伸铺满背景

contain：对某一个方向拉伸，到达指定宽或者高就不再拉伸（保持图片的宽高比）

百分比：一般两个（background-size：30% 50%）宽度整个块的30%，高度真个块高的50%

直接设置值：300px 300px

3、background-position

设置图片在水平竖直方向上的位置（相对于这个块元素的坐标系）

具体像素：background-position：300px 300px;

固定关键字：top left right bottom center

如果position只设置一个位置，那另外一个默认center

4、背景图片永远居中展示（无论浏览器和屏幕解析度）

方案一

body{
margin:0;
padding:0;
}
.box{
background-image: url();
background-position: center 任意；
/*水平居中上下就任意了*/
}

方案二(通过相对位置去实现)

    <style>.one img{/* 图片先向左移动宽度一半，然后包含图片的区块在向右移动块宽度的一半 ，这样就能实现无论浏览器如何显示都能实现图片居中显示*/position: relative;left: -960px;/* 图片向左移动默认宽度一半 *//* transform: translate(-50%);这个是相对一img本身左移50%，等于left-960px *//*  向右移动父元素的一半*/margin-left: 50%;}</style>
</head>
<body><div class="one"><img src="../image/duokuai.png" alt="5555"></div>
</body>

5、background-attachment

三个取值：

scroll：背景图片随缘素一起滚动（默认
loacl：背景图片跟随元素以及元素内容一起滚动
fixed:背景图片相对于浏览器窗口固定

.bxo{width:200px;height:200px;background-image:url();background-attachment:local;overflow:auto
}<div class="bxo">
救援队还带来了捐赠的救援物资——成箱的矿泉水、泡面、大米、菜油，物资抵达后，村支书李昌青趿着拖鞋，裤腿高卷，正在安排村里的男性青壮年在“码头”接收搬运。对被围困在龙口村的村民们来说，救援队给他们带来了出行的便利。最热闹的时候，在水面上接驳往返蒲塘村、李家村、邹家村、爱民村之间的舟艇达到十余艘——有从村外要进“孤岛”帮忙的村民亲戚，也有需要出村办事或者采购的本村村民。救援队的联系方式，被张贴在每个村子的入口处，即便是入夜后，也有值班的救援队员可以执行紧急的运输任务。余姚战狼救援队负责人张东辉发现，鄱阳湖水域的危险，暗藏在看似平静的浑黄水面下。比如，倒掉的电线杆大半截淹埋在洪水中，只露出一小节尖锐顶部，若操作不当便会割破橡皮艇。50岁的韩建忠是浙江省余姚市马渚镇菁江渡村治调主任，也是战狼救援队的队员之一。他通常是站在舟艇尾部担任冲锋舟操机手的人。站在船尾，韩建忠无法完全看到船头水下的障碍物，同船的观察员成为他的“眼睛”，两人在船身一前一后保持沟通，才能确保舟艇行驶中及时调整方向和速度。每一次当舟艇行进至渔网周围，韩建忠都必须熄火，等到同船的队员利用手划桨推开网状物并划行出该区域，他才会重启发动机，“一旦有异物被卷入发动机内，慢速行驶中可能会导致骤停，快速行驶时还有覆艇的危险。”因此，出于安全考虑，每一次的行船路线都是固定重复的，不能随意更换。尽管，在几支救援队陆续赶到之前，龙口村倚靠自身完成了大部分村民安置，有惊无险地度过了水位暴涨的时期，但村里救援物资和人员有限， “好几天了，恐慌得很，见到你们来了，心里才算有了底。“公羊救援队的队长王斌至今记得第一次进村时，一位村民对他掏心窝子的话。“天打湿，天晒干，有来的时候，就有走的时候”7月15日，天气预报中的雷阵雨迟迟没来。对龙口村的村民来说，不再继续下雨便是好事。邹家村曾是龙口村受灾最严重的村庄，随着水位下降，村民家中的积水渐渐退去，只有村中地势低洼处还泡在水中外。村中主路也从水中露出，被裹上一层晒干后的黄泥沙。离湖面较近的邹道池家，是四间联排的平房，打开房屋的后门，是一片略低于门槛的积水。屋主正在屋旁的积水中清理厚厚的漂浮垃圾。几乎每户人家的房门口，都清扫出好几堆混合着枝干、玻璃瓶、塑料袋和木板的洪水垃圾。村民们达成了共识，为了保护鄱阳湖生态，这些垃圾不允许抛回湖水中，干燥后的树枝可以焚烧，其余垃圾全部要统一清运出村。</div>

6、background缩写属性

image、position/size、repeat、attachment、color

size可以省略，不省略的话必须紧跟position后面，其他顺序无所谓

7、background-image和image选择取舍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9iiSgAq-1600922604312)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200719001839859.png)]

四、CSS-sprite

1、简介

css图像合成技术，将各种小图片合并到一个图片上，然后利用css背景图定位到对应图片部分

好处：减少网页http请求量，加快网页响应速度，减轻服务器压力，减收图片大小，解决图片命名困扰

2、练习京东的多块好省

<style>/* reset.css 重置属性一般放到一个文件里*/body,p,ul{margin: 0;padding: 0;}ul{list-style: none;}/* common.css 基本的也要放到一个css文件里*/.wrap{margin: 0 auto;width: 1000px;}.one ul li,h5,p{display: inline-block;}.one ul li{margin-left: 20px;margin-right: 20px;}.one ul li p{height: 42px;line-height: 42px;font-weight: 700;font-size: 18px;}.one ul li h5{width: 36px;height: 42px;vertical-align: middle;/* 文本缩进 */text-indent: -9999px;background-image: url("../image/duokuai.png");/*图片位置http://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/23f3ddf914b1b527d0429a3d713cfe3a.png*/}.duo{background-position: 0 -192px;}.kuai{background-position:  -41px -192px}.hao{background-position:  -82px -192px}.sheng{background-position:  -123px -192px}/*不一定非得一个一个写，还可以使用伪类nthchild*/</style>
</head>
<body><div class="one wrap"><ul class="wrap"><li><h5 class="duo">多</h5><p>品类齐全，轻松购物</p></li><li><h5 class="kuai">块</h5><p>多仓直发，极速配送</p></li><li><h5 class="hao">好</h5><p>正品行货，精致服务</p></li><li><h5 class="sheng">省</h5><p>天天低价，畅选无忧</p></li></ul></div>
</body>

3、京东底栏

    <style>body,ul,a{margin: 0;padding: 0;}.wrap{margin: 0 auto;}.one{text-align: center;}.one a{background-image: url("../image/duokuai.png");text-decoration: none;display: inline-block;text-indent: -999px;float: left;width: 100px;height: 35px;}a:hover{color:aqua;}a:nth-child(1){background-position: -205px -111px;}a:nth-child(2){background-position: -205px 0;}a:nth-child(3){background-position: -205px -35px;}a:nth-child(4){background-position: -205px -70px;}a:nth-child(5){background-position: -205px -140px;}</style>
</head>
<body><div class="one wrap"><a href="#">w</a><a href="#">k</a><a href="#">w</a><a href="#">5</a><a href="#">5</a></div>
</body>

五、其他CSS属性和元素补充

1、css-隐藏元素的另外一种方法visiblity属性

两个值visible（显示元素）、hidden（隐藏元素）

跟display的区别：display：none的隐藏是将整个区域和内容隐藏，留白部分由其他元素补上。而这个visiblity是隐藏区域内部内容，该区域空白显示

2、css-针对元素内容溢出属性overflow

visible:溢出内容继续显示

hidden：溢出内容隐藏

scroll：溢出内容被隐藏，但能通过滚动条去查看（滚动条会额外占据宽高）

auto：自动根据溢出内容自动设置是否隐藏还是滚动显示（有超出部分就滚动，没有就算了正常显示）

还有overflow-x/overflow-y分别设置水平垂直方向，单独对某一个轴设置处理

<head>
<style>.45{overflow:auto;width:400px;height:50px;}</style>
</head>
<body>
<div class="45"><img src="../img/jpg.jpg" alt=""></div></body>

3、元素之间空格（行内级元素）

编译时行内级元素的换行会被解析成空格，无论几个换行都一个空格

消除空格解决方式：

元素代码直接不换行
每行后面加注释
对body进行设置：font-size：0 但是这样的话每个文字都要自己设置文字大小否则不出现（苹果浏览器不支持）
给元素加上浮动float（可以消除基线对齐？）

4、元素嵌套一般规律

块级元素、行内块级元素（inline-block）可以嵌套任何元素
行内元素不要嵌套块级元素
行内元素一般只能包含行内元素

5、css属性-word-break对于多个字符连在一起没有换行，被当成一个单词导致内容溢出

word-break：break-all（一般英文字母需要遇到）

6、行内非替换元素注意点（重要）

对行内级非替换元素不起作用的属性：width 、height、 margin-top、 marigin-bottom
对行内非替换元素效果比较特殊：padding-top、padding-bottom、上下方向的border(能显示但是不会额外占据空间就rongyi导致，下面的元素会可能显示到padding里)
```
span{
background-color:red;
padding: 0 20px;
padding-bottom:10px;
}

<span>122222</span>
<div>div</div>
```
解决方式： display:inline-block

7、水平居中（重要）

普通文本居中：text-align：center;

行内元素居中：text-align：center;

行内替换元素（图片：text-align：center;

inline-block元素：text-align：center;

块级元素在块级元素内居中（块级元素是占据整行的，你调高度宽度他还是占据整行只是不显示一）：在子块级里设置margin：0 auto（前提position的left=0，right=0或者值一样也行）；

<style>
.bxo{width: 100px;height: 200px;background-color: aquamarine;<!--若是块级元素，这个text-align: center依据继承原则会被继承到子块元素内-->text-align: center;
}
.b2{background-color: lawngreen;display: inline-block;
}
.b3{background-color: lightcoral;width: 50px;height: 50px;margin: 0 auto;
}</style>
</head>
<body><div class="bxo"><!-- <!-- <p>55555</p>普通文本 --><!-- <strong>\\\</strong> 行内元素--> <!-- <div class="b2">55555</div>  inline-block元素--><!-- 块级元素 --><div class="b3">5555</div></div>
</body>

重要margin： 0 auto居中原理

auto虽然默认是0但是，拿左右方向举例，左侧margin设置完毕后右侧为auto时，当系统会默认自动分配剩余的像素，比如margin-left：auto；margin-right：0；，是将块元素以float：right形式显示，因为右侧margin为0而左侧为auto系统自动分配剩余像素。

而margin：0 auto是缩写属性，默认right和left为auto，所以左右的marin会被系统平均分配

.bxo{width: 100px;height: 200px;background-color: aquamarine;text-align: center;
}
.b2{background-color: lawngreen;display: inline-block;
}
.b3{background-color: lightcoral;width: 50px;height: 50px;<!--相当于这个-->margin-left: auto;margin-right: auto;
}</style>
</head>
<body><div class="bxo"><!-- <!-- <p>55555</p>普通文本 --><!-- <strong>\\\</strong> 行内元素--> <!-- <div class="b2">55555</div>  inline-block元素--><!-- 块级元素 --><div class="b3">5555</div></div>
</body>

nline-block元素–>

    <!-- 块级元素 --><div class="b3">5555</div>
</div>

```