盒模型 + 布局

切换盒模型:
box-sizing : content-box 是W3C盒子模型
box-sizing: border-box是IE盒子模型

盒模型:Margin Edge / borderEdge / padding Edge / Content Edge

标准盒模型 : width 等于 content部分宽度; height 等于 content部分高度

image.png

IE盒模型 : width 等于 content + padding + border 总宽度; height 等于content + padding + border总高度

image.png

块元素 VS 行内元素

块级元素:独占一行,width默认100%,可以控制height,margin,padding,border

块级元素:
address blockquote 【canvas article aside audio】(HTML5)
dd div dl fieldset form 【figcaption figure footer】(HTML5)
h1, h2, h3, h4, h5, h6
hr noscript ol p pre section table 【header hgroup output 】(HTML5)
tfoot ul 【video】HTML5

行内元素:可以设置border,padding,margin-left,margin-right,border-top,border-top

行内元素
b,big,i,small,tt
abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var
a,bdo,br,img,map,object,q,script,span,sub,sup,button,input,label,select,textarea

页面布局

块级元素进行左右布局——float + clear
让一个元素既不占一行,又能设置宽高属性——display

display:block(块级) | inline(行内) | inline-block(行内块级) | flex(弹性盒布局)

弹性布局

display:flex;

.box{

/*主轴方向:左到右 | 右到左 |  上到下 | 下到上*/
flex-direction : row | row-reverse | column | column-reverse;

/*换行:不换  |  换行  | 换行并第一行在下方*/
flex- wrap : nowrap | wrap | wrap-reverse;

/*主轴方向和换行简写*/
flex-flow : <flex-direction>  || <flex-wrap>

/*主轴对齐方式:左对齐 | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/
justify-content:  flex-start | flex-end | center | baseline | stretch;

/*交叉轴对齐的方式:顶端对齐 | 底部对齐 | 居中对齐 |  上下对齐并铺满 |文本基线对齐 */
align-items : flex-start | flex-end | center | baseline |stretch;

/*多主轴对齐:顶部对齐 |  底部对齐 |  居中对齐 | 上下对齐并铺满 | 上下平均分布*/
align-content : flex-start  | flex-end | center | space-between | space-around | stretch
}

但flex不能解决兼容性问题,因此还需要positionfloat

网页的布局

普通布局

Flex——Flexible Box,解释为“弹性布局”,为盒模型提供最大的灵活性
任何一个容器都可以指定为Flex布局

.box{  display:flex; }

行内元素也可使用Flex布局

.box{ display:inline-flex; }

webkit内核的浏览器,必须加上-webkit前缀

.box{  display:-webkit-flex;   display:flex;}

设置为Flex布局以后,子元素的float、clear、vertical-align属性失效

Flex布局相关

Flex布局

采用Flex布局的元素,称为FLex容器(flex container);
所有子元素自动成为容器成员,称为Flex项目(flex item);
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴cross axis

定位部分

position:absolute(绝对) | relative (相对) | fixed (固定) | static(默认没有定位) | inherit

  • absolute:生成绝对定位元素,相对于static定位以外的第一个父元素进行定位。 位置通过left, top, right, bottom;即相对的元素可能是
  • fixed:生成绝对定位的元素, 相对于浏览器窗口进行定位。
  • relative:生成相对定位的元素。相对于其正常位置进行定位。 在一个相对定位的元素上设置top,right,bottom,left;
  • static:默认,没有定位,元素出现在正常的流中;top,bottom,left,rightz-index会被忽略
  • inherit: 规定应该从父元素继承position属性的值

生成一个网页的过程:

1.HTML代码转换成DOM
2.CSS代码转化成CSSOM(CSS Object Model)
3.结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
4.生成了布局(layout),即被所有渲染树的所有节点进行平面合成。
5.将布局绘制到(paint)在屏幕上。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,543评论 5 15
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 1,674评论 0 0
  • 夜深了,忽然想起白天闪过脑子里的一个段子,最近在练笔和学习写文章,随感而发,真随性,随手要拿捏,记录,兴许以后...
    A_A董海燕阅读 338评论 0 0
  • 昨晚,看了电影频道的节目,《战狼》和《忍者神龟》,有点太嗨了,忘了交作业。 早起进群一看,好悲伤呀!发了10元的红...
    风雨同舟_f997阅读 232评论 3 2