发表于： 2019-04-17 20:45:05
2 726
task3
总结:任务三我们需要深入了解盒子模型了解盒子的组成，边框、内边距、 外边距、内容以及他们的作用 内边距又分为上下左右
分别对应的tio right bottom 以及left 外边距一样
相邻元素外边距合并
两个相邻标准流块级元素，上面元素的margin-bottom边距会和下面的margin-top边距合并，如果两个外边距全为正值，合并后的边外边距等于margin-bottom边距和margin-top边距中最大的那个边距，这种现象称为margin的“塌陷”，即较小的margin塌陷到较大的margin中了。如果两个外边距存在负值，合并的外边距的高度等于这些发生合并的外边距的和。当和为负数时，相邻元素在垂直方向上发生重叠，重叠深度的呢关于外边距和的绝对值；当和为0时，两个块级元素无缝连接
外边距合并的必备条件：margin必须是邻接的
两个margin是邻接的必需满足以下条件：
1、必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中
2、没有线盒，没有空隙，没有padding和border将他们分隔开
3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
<1>:元素的margin-top与其第一个常规文档流的子元素的margin-top
<2>:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
<3>:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
<4>:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立斤的BFC的元素的margin-top和margin-bottom
合并规则:
一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会合并，除非它们之间存在clearance
一个常规文档流元素的margin-top与其第一个常规文档流的子元素的margin-top产生合并，条件为父元素不包含padding和border,子元素不包含clearance
一个’height’为’auto’并且’min-height’为0的常规文档流元素的margin-bottom会与其最后一个常规文档流子元素的margin-bottom合并，条件为父元素不包含padding和border,子元素的margin-bottom不与保护clearance的margin-top合并
一个不包含boder-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其’height’为0或’auto’,’min-height’为’0’,其里面也不包含line box,其自身的margin-top和margin-bottom会合并
创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会合并
浮动元素不与任何元素的外边距产生合并（包括其父元素和子元素）
绝对定位元素不与任何元素的外边距产生合并
inline-block元素不与任何元素的外边距产生合并
px相对长度单位像素是相对于屏幕分辨率而言
EM特点
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
relative：生成相对定位的元素，相对于其正常位置进行定位。
元素的位置通过left、right、top、button属性进行规定，
可以通过z-index进行层次分级。
元素元素仍保持其未定位前的形状，原本所占的空间仍将保留。
如果没有定位偏移量，对元素本身没有任何影响
absolute：生成绝对定位元素。使元素脱离文档流，并相对于其包含块进行定位，包含块可能是文档中的另一个元素或者是初始包含块，
元素原先在正常文档流中所占的空间会会被后面元素占据；
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框；
绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static（默认既是static），那么设定了absolute的子元素即以此为包含块（最近的）。如果都没有定义，那么就相对于整个文档body定位（注意不是相对于浏览器窗口定位）
相对定位一般都是配合绝对定位元素使用
fixed：生成绝对定位元素，相对于浏览器窗口的定位。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixedfloat常跟属性值left、right、none
Float:none 不使用浮动
Float:left 靠左浮动
Float:right 靠右浮动
float语法：
float : none | left |right
参数值：
none : 对象不浮动
left : 对象浮在左边
right : 对象浮在右边
1.如何利用PS切图以及从UI图中获取所需信息？
利用PS切图可以切出我们需要的图片还有UI图的形状，我们需要做的那些要求等。
2.px、em、rem、%、vw、wh、vm等单位有什么区别？
px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。
px像素（Pixel）值是固定的，不会随着屏幕宽度变而变。
em:是相对单位。em其实就是一种排版的测试单位.
Rem:是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作
vw-这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。
vh-这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。
3.如何进行自适应网页设计
meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
？
4.css有哪些选择器，优先级如何计算？
1.类别选择器以.号来选择在HTML中，元素可以定义一个class的属性，并且多个元素都可以重复应用这个属性。
2、标签选择器
一个完整的HTML页面是有很多不同的标签组成，如：body，div，p，ul，li，而标签选择器，则是 决定哪些标签采用相应的css样式。
ID选择器可以为标有特定ID的HTML元素制定特定的样式。根据元素ID来选择元素，具有唯一性，这意味着同一ID在同一文档页面中只能出现一次。例如，你将一个元素的id取值为“name”，那么在同一页面你就不能再将其他元素id取名为“name”了。
前面以“#”号来标志，在样式里面可以这样定义：
用过“*”号来表示。如下代码表示所有元素的内外边距都为0，所有的字体都为微软雅黑。他可以清除不同浏览器的默认样式。
同时通用选择器还可以和后代选择器组合。如下表示所有p元素后代的所有元素都应用这个样式。
注意：但是如果你在p标签里嵌套了一个p标签，就会出现浏览器不能解析的情况，因此要避免这种情况发生。
5、后代选择器
6、子选择器
请注意这个选择器与后代选择器的区别，子选择器只是选择元素的直接后代，即仅仅作用于第一个后代。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
7、伪类选择器
即链接样式。a元素的伪类，存在4中不同的状态：link、visited、active、hover
9、相邻同胞选择器
如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式，就可以使用相邻同胞选择器。两个元素之间用“+”进行连接。
1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。
2、作为style属性写在元素内的样式
3、id选择器
4、类选择器
5、标签选择器
6、通配符选择器
7、浏览器自定义或子元素集成父类的样式
将上面的稍微总结一下就是：
！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性
同一级别中后写的会覆盖先写的样式。
5.什么时候用margin好，什么时候用padding好？
需要边框外的时候用外边距 需要内部定位的时候用内边距。
6.手机分辨率和网页中的px是一回事吗？
不一样的所以需要网页自适应
meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
返回列表
评论