CSS2：盒模型/背景

最新推荐文章于 2024-09-14 17:41:03 发布

weixin_33912453

最新推荐文章于 2024-09-14 17:41:03 发布

阅读量110

点赞数

文章标签： php python

原文链接：https://my.oschina.net/u/4045971/blog/3015918

版权

2019独角兽企业重金招聘Python工程师标准>>>

1. CSS盒模型

a. W3C标准盒模型

width/height:宽度/高度=内容的宽度/高度;
包括：内容，内边距padding（指内容和边框的距离），边框border(solid,dashed(虚线),dotted（点线）)，外边距margin（指边框和其他元素的距离）

b.怪异模型

在IE6下，没有<!doctype html>会开启怪异模型；
怪异模型的Height/width=内容+padding+border：应用：父子元素移动子元素的位置，在父元素加padding-top和
box-sizing:border-box；
box-sizing:border-box(将标准盒模型-->怪异盒模型/混杂模式)

2.背景background

background:red url() no-repeat 100px(水平方向改变背景图片的位置相对于原来的位置) 200px（垂直方向）;
background-color: ;
background-image:url();
Background-repeat：repeat-x;/repeat-y;/no-repeat;
Background-position:left bottom;
Background-attachment:fixed/scroll;//背景图像不随页面滚动

3.PC端/移动端/响应式布局/固定布局

PC端：电脑端
移动端：手机，ipai;
固定布局：当页面缩小时，页面不会发生变化；
响应式布局：当页面缩小时，页面的内容会发生位置的变化；

4.伪元素选择器

：：after{}/：：before{}:必须定义content属性;插入的元素是行级元素；如果content是空的，写空字符串；content：‘’； Eg:

<div>ddd</div> div::before{ Content:”222”; } ### **5.京东的省略号（...）** ###### 1. 单行文字,最后多余文字隐藏： - White-space:nowrap;(不换行)； - Overflow:hidden - Text-overflow:ellipsis;(.........) 2. 多行文字，最后多余文字隐藏：（只能用谷歌浏览器） Display:-webkit-box;(弹性盒模型) - -webkit-box-orient:vertical;(垂直方向) - -webkit-line-clamp:3;(最多显示3行) - Overflow:hidden; - Text-overflow:ellipsis; ### **6. Display** - 块级元素与display:block不是同一个概念; - <li>元素默认display值是list-item; - <table>元素默认display值是table; - 但它们均是“块级元素，”，因为它们都符合块级元素的基本特征，也就是在一个水平流上只能显示一行，多个块级元素会换行显示； - 正是由于“块级元素”具有换行的特性，因此可以配合clear属性来清除浮动带来的影响，eg: ```html .clear:after{ Content:’’; Display:table;/block;/list-item; Clear;both; } ``` - 但在实际的开发中，不会使用display:list-item; - 理由：1会出现list-style;IE浏览器不支持伪元素设置display:list-item; - display:list-item会出现项目符号，是因为list-item生成了一个附加盒子（“标记盒子”），专门用来存圆点，数字等项目符号，IE浏览器下伪元素不支持，就是不能创建这个“标记盒子”)； - display:inline-block;(实际上是由外在的“内联盒子”，和内在的“块级容器盒子”)；

7.最大宽度

元素设置white-space:nowrap后的宽度；如果内部元素没有块级元素或块级元素没有设置宽度值，则“最大宽度”为最大的连续内联盒子的宽度；最大宽度的应用：eg:自定义滚动
方法1：借助原生的scroll left/scroll top值变化，优点简单，缺点：效果呆板；
方法2：根据内部元素的尺寸和容器的关系，通过修改内部元素的位置实现滚动效果，优点，效果可以很绽放；eg:iScroll,如果我们希望使用iSroll模拟水平滚动，只能使用最大宽度；
Eg:https://demo.cssworld.cn/3/2-7.php;
Width:默认为auto;当width设置为具体的值时，流就消失；

8.CSS流动布局下的宽度分离原则

CSS中的width属性不与影响宽度的padding/border(有时候包括margin)属性共存；宽度分离原则让页面更加稳固；不用担心尺寸的变化；

.box{
Width:100px;
Border:1px solid;
}

此时整个盒子宽度是102px,如果增加padding设置，此时变为142px;大了40px,与原来宽度明显有差异，容易出现布局问题；为了不影响之前的布局，要减去40px的padding才行，所以width:60px;
如果使用宽度分离：

.father{
width: 102px;
}
.son{
margin: 0 20px;
padding: 20px;
border: 1px solid;
}

此时，父元素定宽，子元素的width默认为auto,所以会充满父级，而又设置了padding和margin,所以盒子不会变大；

9.改变width/height作用细节的box-sizing

Box-sizing:改变width的作用细节；
内在盒子：content-box,padding-box,border-box,margin-box;默认情况下width是作用在content-box上的，box-sizing的作用是把width作用的盒子变成其他几个；

{
Box-sizing:content-box;//默认值
Box-sizing:padding-box;//
Box-sizing:border-box;//支持，此时，border和padding的内容平分width
Box-sizing:margin-box;//不支持
}

Eg:

.box{//宽度100px
Width:100px;
box-sizing:border-box;
Border:1px solid;
}
.box{/宽度100px
Width:100px;
box-sizing:border-box;
Border:1px solid;
padding:20px;
}

box-sizing:border-box的应用:原生普通文本框<input >和文本域<textarea>的100%自适应父容器的宽度；<input >，<textarea>都有border,而且需要padding的大小，否则输入的光标会顶着边框。解决：

textarea{
Width:100%;
-ms-box-sizing:border-box;//IE
Box-sizing:border-box;
}

10.Height:auto

CSS的默认流是水平方向的，父元素的高度未设置由子元素撑开；而height：100%是多余的；因为百分比高度值要起作用，其父级必须要有一个可以生效的高度！！！
如何让height：支持100%效果；
（1父级设置显式的高度值，eg:设置具体的值，或者可以生效的百分比比值高度,其相对于content box） Eg:

html,body{
Height:100%;
}

(2)子元素使用绝对定位；（其相对于padding box）/父元素相对定位；应用：想要两个一样大小的图片

Http://demo,cssworld.cn/3/2-12.php
Eg: div{
Height:100%；
Position：absolute;
}

如果父元素的height为auto,,只要子元素在文档流中，其百分比比值就会完全被忽略，
如果包含块的高度没有显式指定，其高度由内容决定，并且该元素不是绝对定位，则计算值为auto.
脱离文档流的元素，默认是没有宽高的；
浮动的元素是相对于父级的；如果父级没有高度，子元素也是没有高度的；
而绝对定位，如果父级没有高度，子元素有高度，子元素可以显示，但此时父元素的高度也为0；
如果子元素脱离文档流，并设置了高度，而父元素没有高度，则父元素是撑不开子元素的，但如果子元素是绝对定位，则子元素会显示设置的高度；

11.min-width/max-width/min-height/max-height

min-width/max-width:用于自适应布局/流体布局：
Eg网页宽度自适应：既满足不同屏幕大小，又能良好显示；

.container{
Min-width:1200px;
Max-width:1400px
}

width/height:的默认值为auto;
Max-height/max-width的默认值为none;
Min-height/min-width的默认值为auto;
Max-width的优先级远远大于width（无论是否加！important）;
并且min-width优先级>max-width；
任意高度元素的展开和收起的动画技术（有滑动效果）

转载于:https://my.oschina.net/u/4045971/blog/3015918