黄埔网站建设 信科网络,中国企业商铺网,劳务公司网站建设方案,推荐常州网站建设公司个人主页#xff1a;学习前端的小z 个人专栏#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结#xff0c;欢迎大家在评论区交流讨论#xff01; 文章目录 CSS 盒子模型1 盒子模型#xff08;Box Model#xff09;组成2 边框#x… 个人主页学习前端的小z 个人专栏HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结欢迎大家在评论区交流讨论 文章目录 CSS 盒子模型1 盒子模型Box Model组成2 边框border3 内边距padding4 外边距margin4.1 外边距典型应用4.2 外边距合并4.3 相邻块元素垂直外边距的合并4.4 嵌套块元素垂直外边距的塌陷 5 清除内外边距6 单行文字垂直居中7 怪异盒子模型 附CSS margin与text-align居中的区别 CSS 盒子模型
页面布局三大核心盒子模型、浮动和定位。 网页布局过程
从大到小大盒子包小盒子从外到里从全局到局部先准备好相关的网页元素网页元素基本都是盒子利用 CSS 设置好盒子样式然后摆放到相应位置往盒子里面装内容网页布局的核心本质 就是利用 CSS 摆盒子
1 盒子模型Box Model组成
所谓盒子模型就是把 HTML 页面中的布局元素看作是一个矩形的盒子也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子封装周围的 HTML 元素它包括边框、外边距、内边距、和 实际内容 内容宽度/高度使用属性width / height
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的css内定义的宽width和高height指的是填充以里的内容范围。
因此一个元素实际宽度盒子的宽度左边界左边框左填充内容宽度右填充右边框右边界。 元素的高度也是同理。
2 边框border
border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色
语法
border : border-width || border-style || border-colorborder-width定义边框粗细单位是pxborder-style边框样式 none没有边框即忽略所有边框的宽度默认值solid边框为单实线(最为常用的)dashed边框为虚线dotted边框为点线 border-color边框颜色
边框简写
border: 1px solid red;边框分开写法
border-top: 1px solid red;请给一个 200*200 的盒子设置上边框为红色其余边框为蓝色。
border影响了盒子实际大小如果盒子已经有了宽度和高度此时再指定边框会撑大盒子。
3 内边距padding
padding 属性用于设置内边距即边框与内容之间的距离。
padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距
padding 属性简写属性可以有一到四个值。
padding: 5px1个值代表上下左右都有5像素内边距padding: 5px 10px2个值代表上下内边距是5像素 左右内边距是10像素padding: 5px 10px 20px3个值代表上内边距5像素 左右内边距10像素 下内边距20像素padding: 5px 10px 20px 30px4个值上是5像素右10像素下20像素左是30像素 顺时针
当我们给盒子指定 padding 值之后发生了 2 件事情
内容和边框有了距离添加了内边距。padding影响了盒子实际大小。
如果盒子已经有了宽度和高度此时再指定内边距会撑大盒子。
**解决方案**如果保证盒子跟效果图大小保持一致则让 width/height 减去多出来的内边距大小即可。
如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
4 外边距margin
margin 属性用于设置外边距即控制盒子和盒子之间的距离。
margin-left左外边距margin-right右外边距margin-top上外边距margin-bottom下外边距
margin 简写方式代表的意义跟 padding 完全一致。
4.1 外边距典型应用
外边距可以让块级盒子水平居中但是必须满足两个条件
盒子必须指定了宽度width。盒子左右的外边距都设置为 auto 。
.header{ width:960px; margin:0 auto;}常见的写法以下三种都可以
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto;常用
**注意**以上方法是让块级元素水平居中行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
4.2 外边距合并
使用 margin 定义块元素的垂直外边距时可能会出现外边距的合并。
主要有两种情况
相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷
4.3 相邻块元素垂直外边距的合并
当上下相邻的两个块元素兄弟关系相遇时如果上面的元素有下外边距 margin-bottom下面的元素有上外边距 margin-top 则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。 **解决方案**尽量只给一个盒子添加 margin 值。
4.4 嵌套块元素垂直外边距的塌陷
针对于父子盒子的上外边距问题正正取大正负取和负负取小
对于两个嵌套关系父子关系的块元素父元素有上外边距同时子元素也有上外边距此时父元素会塌陷较大的外边距值。
解决方案
可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加 overflow:hidden。还有其他方法比如浮动、固定绝对定位的盒子不会有塌陷问题涉及到BFC后面再讲解。
5 清除内外边距
网页元素很多都带有默认的内外边距而且不同浏览器默认的也不一致。因此我们在布局前首先要清除下网页元素的内外边距。
* {padding:0; /* 清除内边距 */margin:0; /* 清除外边距 */}**注意**行内元素为了照顾兼容性尽量只设置左右内外边距不要设置上下内外边距无效。但是转换为块级和行内块元素就可以了。
6 单行文字垂直居中
让文字的行高等于盒子的高度可以让文字在当前盒子内垂直居中 这时候盒子的高度为100px行高的上行间距和下行间距把文字挤到中间了。
如果行高小于盒子高度文字会偏上如果行高大于盒子高度则文字偏下。
7 怪异盒子模型
CSS3 中可以通过 box-sizing 来指定盒模型有2个值即可指定为 content-box、border-box这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况
box-sizing: content-box 盒子大小为 width padding border 以前默认的box-sizing: border-box 盒子大小为 width
如果盒子模型我们改为了box-sizing: border-box 那padding和border就不会撑大盒子了前提padding和border不会超过width宽度
怪异盒子模型box-sizing: border-box也叫做内减盒模型或者IE 盒子模型我们可以通过 css 样式 box-sizing 来进行切换
select {box-sizing: border-box; /* 怪异盒子模型内减盒子模型 */box-sizing: content-box; /* 标准盒子模型 */
}内减盒子模型的 宽度 高度计算 和标准盒子模型计算方式不同。
怪异盒子模型的 content 内容宽度会把 padding 和 border 算入其中是由外而内的计算宽度。
怪异盒子模型当内减到负数的时候那么表现形式和标准盒子模型差不多。
两种盒子模型区别
主要区别在于盒子的整体宽度高度计算方式不同
原理正常盒模型的大小是由内到外的由内部决定外部的大小而怪异盒模型是由外而内的。可以同时设置 box-sizing 属性来使用这一特性是其改变 border 宽度也不影响其他元素box-sizing:简单理解就是盒子大小基于什么计算的;
附CSS margin与text-align居中的区别
1、margin: 0 auto只针对块级居中对行内标签元素和行内块标签元素含有inline的无效。
2、父级加text-align: center 对子级的文本或者行内标签元素和行内块标签元素含有inline进行居中
对子级块级无效由于继承性子级块级如果没有重置text-align子级块级孙子含有inline是有效的。
