CSS——盒模型

css样式表格、字体、文本、布局盒模型、浮动、定位、弹性盒子等等盒模型css的一种开发布局模式它根据标签在文档流中的特点来布局标签在文档流中的特点 块元素、行内元素、行内块的特点一旦标签脱离文档流 标签在文档流中的特点也就不存在了。盒模型的布局方式一定是最主要的最基础网页把页面中所有的标签所有的内容都当作一个个小盒子小区块我们在布局时需要考虑盒子的大小及位置不需要考虑它的形状文档流网页开发存在多层结构我们把页面的最底层叫文档流我们写的标签默认都在网页最低层一、盒子模型的构成盒模型 冰箱快递内容区冰箱内边距泡沫边框纸箱子外边距位置盒模型的大小跟哪些组成部分有关跟内容区、内边距、边框有关跟外边距无关内容区用来装内容默认设置的宽高是盒模型的内容区大小二、盒子模型——边框1、设置边框的简写方式border: 边框的大小边框的样式边框的颜色;2、设置边框的完整写法1border-width: 10px; 可选默认大小1-3px2border-style: solid;必选默认时none可选值solid 实线dotted 点状的虚线double双线dashed 条状的虚线3border-color: red; 可选值默认黑色以上的完整写法样式名后都能跟多个样式值空格隔开4个 上 右 下 左3个 上 左右 下2个 上下 左右1个 上下左右3、自定义小箭头width:0px;height:0px;border: 10px solid red;border-color: transparentorangetransparent transparent ;4、分别设置某一边的边框border-bottom: 10px solid red;border-top: 10px solid red;border-left: 10px solid red;border-right: 10px solid red;5、去除某一边的边框线border-xxx:none;三、盒子模型——内边距1、简写padding也可跟多个值规则跟border-width一样egpadding:10px 30px 40px;2、分别设置某一边的内边距padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;四、盒子模型——外边距外边距设置盒子与盒子之间的距离影响盒子的位置1、简写margin: ;属性值也可以写多个规则跟border-width一致2、分别设置某一边的外边距margin-top: 20px; 在盒子上方增加正值大小的空白盒子向下移动负值向上移动margin-left: 20px;正值盒子向右移动负值向左移动margin-bottom: 20px;正值盒子本身不动下面的盒子向下移动负值下面的盒子向上移动margin-right: 20px;正值盒子本身不动右侧的盒子向右移动负值右侧的盒子向左移动五、盒子模型——圆角效果border-radius: 50%; border-radius: 30px;border-top-left-radius: 30px;border-bottom-left-radius: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;六、元素的水平方向的布局元素在其父元素中水平方向的位置由以下几个属性共同决定margin-left、 border-left、 padding-left、width、 padding-right、 border-right、margin-right一个元素在其父元素中水平布局必须要满足以下的等式margin-left border-left padding-left width padding-right border-right margin-right 父元素内容区的宽度必须满足以上等式必须满足如果相加结果等式不成立则称为过度约束则浏览器会让等式自动调整浏览器在这个7个值只能调整3个值分别margin-left,width,margin-right,调整为auto,1、1个auto谁是auto调整谁让等式成立默认margin-right为auto2、2个auto只要width为auto就调整width若width为固定值margin-left,margin-right为atuo则同时调整把盒子挤到水平居中的位置3、3个auto只要width为auto就调整width作用利用过度约束实现盒子的水平居中排列前提是width为固定值例如应用在版心的设置版心排版的中心版心的设置是为了pc端解决屏幕适配问题正常情况下版心在1000px-1400px之内七、垂直布局overflow: ;可选值visible 正常显示 默认值hidden 裁剪多余文本auto 根据情况自动生成滚动条scroll 生成两侧滚动条/* 隐藏滚动条 */ scrollbar-width: none;八、垂直外边距的重叠1、兄弟元素兄的下外边距跟弟的上外边距重叠在一起1两个外边距为正值以大的为准2为负以绝对值大的为准3一正一负两者两加开始时一般不需要额外做处理2、父子元素父子元素的上外边距重叠在一起如果父子元素的垂直外边距相邻了则子元素的外边距会传递给父元素解决父子外边距折叠的问题1、开启元素的隐藏属性BFC块级格式化属性一旦开启这个元素就会成为一个独立的元素不受其他元素的影响overflow: 非visible;一般喜欢用hidden2、加一个透明的变边框线但这种方式还是会改变盒子的大小border: 1px solid transparent;3、单独提取一个类在元素的前面添加一个空白的表格.clear::before{ content: ; display: table; }十、内联元素的盒子行内元素的盒模型1、不能设置width和height被内容撑开2、可以设置padding但垂直方向padding不会影响页面的布局不会挤别人3、可以设置边框但是垂直的边框不会影响到页面的布局不会挤别人4、可以设置水平方向的外边距水平方向的相邻外边距不会重叠而是求和但不支持垂直外边距十一、默认样式默认样式浏览器为了在页面中没有样式时也可以有一个比较好的显示效果所以为很多的元素都设置了一些默认的margin和padding等默认样式。而它的这些默认样式正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉1、方式一手动清除浏览器的默认样式*{ padding: 0; margin: 0; list-style: none; text-decoration: none; }2、方式二引入重置样式表解决浏览器对默认样式解析不同的问题reset.css: 它把所有的样式都去除要什么样式你自己写normalize.css它保留了默认样式统一不同浏览器呈现问题十二、盒子的大小默认情况下盒子可见宽的大小由内容区内边距边框共同决定box-sizing用来设置盒子尺寸的计算方式width/height 指的是谁可选值content-box内容区默认值border-box宽度和高度用来设置整个盒子可见框的大小包括边框padding内容区十三、隐藏元素一隐藏元素方案1、设置宽高为02、display用来设置元素的显示类型可选值····none元素不在页面中显示隐藏一个元素3、visibility用来设置元素的显示状态可选值visible默认值 元素在页面中正常显示hidden元素不在页面中显示隐藏一个元素位置依然保留4、opcity设置元素的透明可选值0表示透明1表示不透明0-1之间表示半透明二区别1、如果配合动画去写只能用宽高为0或者opcity,这里的变化有数值的变化2、是否占位display和宽高为0时不占位的visibility和opcity是占位的