泰州做网站 泰公网络科技公司,杭州手机网站制作公司,电子商务网站预算,网页版微信文件存储路径文章目录前言系列文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级#xff08;*#xff09;2 盒子模型2.1 看透网页布局的本质2.2 盒子模型#xff08;Box Model#xff09;的组成2.3 边框#xff08;border#xff09;2.3.1 普通边框2.3.2 表格的细线边框2.3.3 边…
文章目录前言系列文章目录1 CSS的三大特性1.1 层叠性1.2 继承性1.3 优先级*2 盒子模型2.1 看透网页布局的本质2.2 盒子模型Box Model的组成2.3 边框border2.3.1 普通边框2.3.2 表格的细线边框2.3.3 边框影响盒子的实际大小2.4 内边距padding2.5 外边距margin2.5.1 普通外边距2.5.2 外边距典型应用2.5.3 外边距合并2.5.4 清除外边距3 圆角边框*4 盒子阴影*5 文字阴影6 浮动float6.1 传统网页布局的三种方式6.2 标准流普通流/文档流6.3 为什么需要浮动6.4 什么是浮动6.5 浮动的特性**6.6 浮动元素搭配标准流的父元素6.7 常见的网页布局6.7.1 常见的三种网页布局6.7.2 浮动布局的注意事项*6.8 清除浮动6.8.1 为什么要清除浮动6.8.2 清除浮动的本质6.8.3 清除浮动的方法总结前言
这篇文章为我跟随pink老师重新系统学习前端时做的一些笔记。
系列文章目录
【前端学习】D1HTML简介与HTML标签 【前端学习】D2-1CSS入门 【前端学习】D2-2CSS基础 【前端学习】D3CSS进阶 【前端学习】D4CSS提高 1 CSS的三大特性
1.1 层叠性
相同选择器给设置相同的样式此时一个样式就会覆盖层叠另一个冲突的样式。层叠性主要解决样式冲突的问题。 层叠性原则
样式冲突执行最下面的样式。样式不冲突不会层叠。
1.2 继承性
CSS中的继承子标签会继承父标签的某些样式如文本颜色和字号。
恰当地使用继承可以简化代码降低CSS样式的复杂性。子元素可以继承父元素的样式text-font-line-这些元素开头的可以继承以及color属性。
行高的继承
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle行高的继承/titlestylebody {color: pink;/* font: 12px/24px Microsoft YaHei; */font: 12px/1.5 Microsoft YaHei;}div {/* 子元素继承了父元素body的行高1.5 *//* 行高是当前元素文字大小font-size的1.5倍即div的行高为21px*/font-size: 14px; }p {/* 当前的行高为1.5*1624px*/font-size: 16px;}/* li没有指定文字大小则继承父元素的文字大小12px当前行高为12px*1.5-18px *//style/headbodydiv测试文字/divp测试文字/pulli测试文字。没有指定文字大小/li/ul/body
/html行高可以跟单位也可以不跟单位如果子元素没有设置行高则会继承父元素的行高1.5此时子元素的行高是当前子元素的文字大小*1.5body行高1.5这样写法的最大优势就是里面子元素可以根据自己文字大小自动调整行高块级元素独占一行块元素宽度默认是容器父元素的100%。
1.3 优先级*
当同一个元素指定多个选择器就会有优先级的产生。
选择器相同则执行层叠性。选择器不同则根据选择器权重执行。
选择器权重
选择器选择器权重继承 或者 *0,0,0,0元素选择器0,0,0,1类选择器伪类选择器0,0,1,0id选择器0,1,0,0行内样式 style“”1,0,0,0!important 重要的∞ 无穷大
权重是由4组数字组成但是不会有进位可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器以此类推。等级判断从左向右如果某一位数值相同则判断下一位数值。继承的权重是0。如果该元素没有直接选中不管父元素权重多高子元素得到的权重都是0。案例一!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlecss权重注意点/titlestyle/* 父亲的权重是100 */#father {color: red!important;}/* p继承的权重为0所以p标签的文字为粉色而不为父元素的红色 */p {color: pink;}body {color: red;}/* 浏览器默认指定了a链接的样式蓝色文字且有下划线所以a链接不能直接继承body的color */a {color: green;}/style/headbodydiv idfatherp测试文字/p/diva href#a标签测试文字/a/body
/html权重叠加如果是复合选择器则会有权重叠加需要计算权重没有进位。
/* .nav li的权重是0,0,0,10,0,1,00,0,1,1 */
.nav li {color: pink;
}
/* ul li的权重是0,0,0,10,0,0,10,0,0,2 */
ul li {color: green;
}
/* li的权重是0,0,0,1 */
li {color: red;
}ul classnavli测试文字/li
/ul2 盒子模型
页面布局的三大核心盒子模型浮动和定位。
2.1 看透网页布局的本质
网页布局过程
先准备好相关的网页元素网页元素基本都是盒子Box。利用CSS设置好盒子样式然后摆放到相应位置。往盒子里面装内容。
网页布局的本质利用CSS摆盒子。
2.2 盒子模型Box Model的组成
所谓盒子模型就是把HTML页面中的额布局元素看作是一个矩形的盒子也就是一个盛装内容的容器。 CSS盒子模型本质是一个盒子封装周围的HTML元素包括边框、外边距、内边距和实际内容。
border边框content内容padding内边距margin外边距
2.3 边框border
2.3.1 普通边框
border可以设置元素的边框。边框有三部分组成边框宽度粗细边框样式边框颜色。边框属性的简写没有先后顺序。
border: border-width | | border-style | | border-color;
border-top: 5px solid red;
border-bottom: 1px dashed green;属性作用border-width定义边框粗细单位是pxborder-style边框的样式border-color边框颜色
案例
/* 请给一个 200*200 的盒子设置上边框为红色其余边框为蓝色 */
div {width: 200px;height: 200px;/* border-top: 1px solid red;border-bottom: 1px solid blue;border-left: 1px solid blue;border-right: 1px solid blue; *//* border包含四条边 */border: 1px solid blue;/* 利用层叠性*/border-top: 1px solid red;
}2.3.2 表格的细线边框
border-collapse属性控制浏览器绘制表格中相邻单元格的边框。
border-collapse: collapse; /* 表示相邻的单元格的边框合并在一起 */2.3.3 边框影响盒子的实际大小
边框会额外增加盒子的实际大小。解决方案
测量盒子大小的时候不量边框。测量盒子大小时包含边框则需要width / height减去边框宽度。
2.4 内边距padding
padding属性用于设置内边距即边框与内容之间的距离。
属性作用padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距
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影响盒子的实际大小。
也就是说如果盒子已经有了宽度和高度此时再指定内边框会撑大盒子。 解决方案如果保证盒子跟效果图大小保持一致则让width / height减去内边距大小。 如果盒子本身没有指定width / height属性则此时padding不会撑开盒子大小。
2.5 外边距margin
2.5.1 普通外边距
margin属性用于设置外边距即控制盒子和盒子之间的距离。
属性作用margin-top上外边距margin-right右外边距margin-bottom下外边距margin-left左外边距
margin的简写方式与padding一致。
1.盒子与盒子之间有了距离添加了外边距。 2. margin不影响盒子的实际大小。
2.5.2 外边距典型应用
块级元素水平居中外边距可以让块级盒子水平居中但必须满足 盒子必须指定了宽度width。盒子左右的外边距都设置为auto自动。 .header { width: 960px; margin: 0 auto; }常见的写法 margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto; 行内元素或行内块元素水平居中 解决方案给其父元素添加text-align: center;
2.5.3 外边距合并
使用margin定义块元素的垂直外边距时可能会出现外边距的合并。
相邻块元素垂直外边距的合并 当上下相邻的两个块元素兄弟关系相遇时如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top则它们之间的垂直间距不是margin-bottom与margin-top的和。取两个值中的较大者——这种现象被称为相邻块元素垂直外边距的合并。 解决方案尽量只给一个盒子添加margin值。嵌套块元素垂直外边距的塌陷 对于两个嵌套关系父子关系的块元素父元素有上外边距同时子元素也有上外边距此时父元素会塌陷较大较大的外边距值。 解决方案 可以为父元素定义上边框。可以为父元素定义上内边距。可以为父元素添加overflow: hidden。 2.5.4 清除外边距
网页元素很多都带有默认的内外边距而且不同浏览器默认的也不一致。因此我们在布局前首先要清除下网页元素的内外边距。
* {padding: 0;margin: 0;
}行内元素为了照顾兼容性尽量只设置左右内外边距不要设置上下内外边距。或者将行内元素转换为块级和行内块元素。
3 圆角边框*
在CSS3中新增了圆角边框样式。border-radius属性用于设置元素的外边框圆角。
border-radius: length;参数值可以为数值圆的半径或百分比的形式。如果是正方形想要设置为一个圆把数值修改为高度或者宽度的一半即可或者直接写50%如果是个矩形设置为高度的一半即可。该属性是一个简写属性可以跟四个值分别代表左上角、右上角、右下角、左下角顺时针。
圆形头像
avatar {width: 30px;height: 30px;border-radius: 50%;
}4 盒子阴影*
在CSS3中新增了盒子阴影样式。border-shadow属性为盒子添加阴影。
border-shadow: h-shadow v-shadow blur spread color inset;属性值描述h-shadow必需。水平阴影的位置允许负值。v-shadow必需。垂直阴影的位置允许负值。blur可选。模糊距离。spread可选。阴影的尺寸。color可选。阴影的颜色。inset可选。将外部阴影outset改为内部阴影。
默认是外阴影outset但是不可以写这个单词否则导致阴影无效。盒子阴影不占用空间不会影响其他盒子排列。
5 文字阴影
在CSS3中text-shadow属性为文本添加阴影。
text-shadow: h-shadow v-shadow blur color;属性值描述h-shadow必需。水平阴影的位置允许负值。v-shadow必需。垂直阴影的位置允许负值。blur可选。模糊距离。color可选。阴影的颜色。
6 浮动float
6.1 传统网页布局的三种方式
普通流标准流浮动定位
实际开发中一个页面基本都包含了这三种布局方式。
6.2 标准流普通流/文档流
标准流标签按照规定好的默认方式排列。是最基本的布局方式。
块级元素会独占一行从上向下顺序排列。 常用元素div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序从左向右顺序排列碰到父元素边缘则自动换行。 常用元素spam、a、i、em等
6.3 为什么需要浮动
浮动可以改变元素标签默认的排列方式
可以实现多个块级盒子div水平排列成一行。浮动的典型应用 虽然转换为行内块元素可以实现一行显示但是行内块之间会有大的空白缝隙很难控制。可以实现两个盒子的左右对齐。
网页布局第一准则多个块级元素纵向排列找标准流多个块级元素横向排列找浮动。
6.4 什么是浮动
float属性用于创建浮动框将其移动到一边直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
选择器 { float: 属性值; }属性值描述none元素不浮动。默认值。left元素向左浮动。right元素向右浮动。
6.5 浮动的特性**
浮动元素会脱离标准流脱标移动到指定位置浮动的盒子不再保留原先的位置。多个浮动的元素会按照属性值一行内显示并且顶部对齐排列。浮动的元素会具有行内块元素的特性。 如果块级盒子没有设置宽度默认宽度和父级一样宽但是添加浮动后它的大小根据内容来决定。
6.6 浮动元素搭配标准流的父元素
为了约束浮动元素的位置网页布局一般采取的策略是先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置。复合网页布局的第一准则。 案例
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle浮动元素搭配标准流父盒子2/titlestyle* { margin: 0; padding: 0; }li { list-style: none; }.box {width: 1226px;height: 285px;background-color: pink;margin: 0 auto;}.box li {width: 296px;height: 285px;background-color: purple;float: left;margin-right: 14px;}/* 这里必须写 .box .last 要注意权重的问题 20 */.box .last {margin-right: 0;}/style/headbodyul classboxli1/lili2/lili3/lili classlast4/li/ul/body
/html网页布局第二准则先设置盒子大小之后设置盒子的位置。 当浮动元素的尺寸大于盒子元素会溢出。但因浮动元素脱标且其外边距不会引起塌陷所以不会撑大盒子。
6.7 常见的网页布局
6.7.1 常见的三种网页布局 通栏盒子和浏览器一样宽不需要指定宽度。
6.7.2 浮动布局的注意事项*
浮动和标准流的父盒子搭配。 先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置。如果一个元素浮动了理论上其余的兄弟元素也要浮动以防止引起覆盖问题。 浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。 当第一个盒子是标准流独占一行第二个盒子左浮动则第二个盒子会在下一行不会盖住第一个盒子。当第一个盒子左浮动第二个盒子是标准流独占一行则第一个盒子会盖住第二个盒子若此时第三个盒子也浮动则第三个盒子会在第二个盒子的下一行第一个盒子的右侧。 ↑好乱但是没办法
6.8 清除浮动
6.8.1 为什么要清除浮动
理想状态中让子盒子撑开父盒子而不是指定父盒子的高度。但是浮动的子元素脱标不占位置会使得父元素的高度为0影响下方的标准流盒子。
6.8.2 清除浮动的本质
本质清除浮动元素脱离标准流造成的影响。 如果父盒子本身有高度则不需要清除浮动。 清除浮动之后父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了。
选择器 { clear: 属性值; }属性值描述left不允许左侧有浮动元素清除左侧浮动的影响right不允许右侧有浮动元素清除右侧浮动的影响both实际开发中用清除左右两侧浮动的影响
6.8.3 清除浮动的方法
清除浮动的策略闭合浮动即只让浮动在父盒子内部影响不影响父盒子外面的其他盒子。
额外标签法也称隔离法W3C推荐的做法。 额外标签法会在浮动元素的末尾添加一个空的标签必须是块级元素不能是行内元素例如div style“clear: both;”/div或者其他标签br /。优点通俗易懂书写方便。缺点添加许多无意义的标签结构化较差。 父级元素添加overflow属性将其属性值设置为hidden、auto或scroll。 优点代码简洁。缺点无法显示溢出的部分。 父级添加:after伪元素。 :after方式是额外标签法的升级版。.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix { /* IE6、7专有 */*zoom: 1;
}优点没有增加标签结构更简单。缺点需要照顾低版本浏览器。代表网站百度、淘宝、网易等 父级添加双伪元素。.clearfix:before,.clearfix:after {content: ;display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}优点代码更简洁。缺点需要照顾低版本浏览器。代表网站小米、腾讯等。 总结
布局为什么使用不同的盒子而不只用div? 标签都是有语义的合理的地方用合理的标签。比如产品标题就用h大量文字段落就用p。为什么用那么多类名 给每个盒子使用一个类名可以更好地找到盒子选取盒子更容易后期维护也方便。什么时候用margin什么时候用padding 大部分情况下两者可以混用各有优缺点。但柑橘实际情况总有更简单的方法实现。网页布局准则 多个块级元素纵向排列找标准流多个块级元素横向排列找浮动。先设置盒子大小之后设置盒子的位置。
原来盒子和浮动的使用有这么多讲究。。
