WEB前端-CSSS盒子模型稳定性

盒子模型布局稳定性

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

  width >  padding  >   margin
复制代码

原因：

margin 会有外边距合并还有 ie6下面margin 有bug，所以最后使用。
padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
width 没有问题，建议经常使用宽度剩余法高度剩余法来做。

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。

div:first-child {width: 200px;height: 200px;background-color: pink; box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */padding: 10px;border: 15px solid red;/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */}div:last-child {width: 200px;height: 200px;background-color: purple;padding: 10px;box-sizing: border-box;   /* padding border  不撑开盒子 */border: 15px solid red;/* margin: 10px; *//* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}
复制代码

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
复制代码

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 但是不能写默认想要内阴影 inset

div {width: 200px;height: 200px;border: 10px solid red;/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  *//* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);}
复制代码

WEB前端盒子模型稳定性相关推荐

前端-----盒子模型
盒模型分为两种:标准模型和IE模型,主要了解标准模型盒模型示意图盒子模型的属性 width :内容的宽度 height: 内容的高度 padding: 内边距,边框到内容的距离 border: ...
CSS盒子模型居中方法，web前端开发教程视频
前言下面分享了一些关于腾讯,酷狗,字节(实习的)面试真题,让大家参考.大家也自己去收集整理其他的面试题,可以通过这些面试题,查看自己的不足,也可以了解自己想要去的公司容易出现的面试题,进行有针对性复 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
【Web前端】落地成盒？达咩之——CSS盒子模型及属性
目录前言什么是盒子模型盒子的组成盒子的大小盒子成分分析 1.外边距--margin 2.padding--内边距 3.border--边框 border-style:边框样式 border- ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
Web前端学习笔记05：CSS_盒子模型_复合选择器_标签显示模式_三大特性_书写规范
文章目录 1. CSS复合选择器 1.1 后代选择器(重点) 1.2 子元素选择器 1.3 交集选择器 1.4 并集选择器(重点) 测试题 1.5 链接伪类选择器(重点) 1.6 复合选择器总结 2. ...
【web前端】CSS笔记小结盒子模型+PS基操+样例（Day 3+部分Day 4）
来源:黑马程序员pink老师前端入门教程目录 I. 盒子模型 Box Model ①网页布局的本质 ②组成部分 ❀图解 ❀边框 border ※ 组成 ※※ 样式 ※ 简写 ※练习 ※细线边框 ...
【web前端】CSS盒子模型
居然隔了一个星期了,啊我到底在干嘛. 使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录框架一.盒子模型 ...
web前端：4_盒子模型与样式排版（手机壁纸切换）
1,块元素特征 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...

WEB前端盒子模型稳定性

WEB前端-CSSS盒子模型稳定性

盒子模型布局稳定性

CSS3盒模型

盒子阴影

WEB前端盒子模型稳定性相关推荐

最新文章

热门文章

WEB前端 盒子模型稳定性

WEB前端-CSSS盒子模型稳定性

盒子模型布局稳定性

CSS3盒模型

盒子阴影

WEB前端 盒子模型稳定性相关推荐

最新文章

热门文章

WEB前端盒子模型稳定性

WEB前端盒子模型稳定性相关推荐