产品网络推广方案设计,郑州关键词优化顾问,常州第一门户网,做网站推销话术目录
一、浮动
#xff08;一#xff09;传统网页布局的三种方式
#xff08;二#xff09;标准流#xff08;普通流/文档流#xff09;
#xff08;三#xff09;为什么需要浮动#xff1f;
#xff08;四#xff09;什么是浮动 #xff08;五#xff09;浮…目录
一、浮动
一传统网页布局的三种方式
二标准流普通流/文档流
三为什么需要浮动
四什么是浮动 五浮动特性重点
1、浮动元素会脱离标准流脱标
2、浮动的元素会一行内显示并且元素顶部对齐
3、浮动的元素会具有行内块元素的特性 六浮动元素经常和标准流父级搭配使用
二、常见网页布局 浮动布局注意点
三、清除浮动
一为什么要清除浮动
二清除浮动的本质
三清除浮动的方法
1、额外标签法
编辑2、父级添加overflow属性 3、父级添加after伪元素 4、父级添加双伪元素 四清除浮动总结
四、常见的图片格式
五、CSS属性书写顺序 一、浮动
一传统网页布局的三种方式
网页布局的本质——用CSS来摆放盒子把盒子摆放到相应位置
CSS提供了三种传统布局方式
普通流标准流浮动定位
二标准流普通流/文档流
所谓标准流就是标签按照规定好默认方式排列
1、块级元素会独占一行从上向下顺序排列。
常用元素div、hr、p、h1~h6、ul、ol、dl、form、table
2、行内元素会按照顺序从左到右顺序排列碰到父元素边缘则自动换行。
常用元素span、a、i、em等
以上都是标准流布局前面学习的就是标准流标准流是最基本的布局方式。
三为什么需要浮动
问题1、如何让多个块级盒子div排列成一行
虽然转换为行内块元素可以实现一行显示但是它们之间会有较大的空白缝隙很难控制。
2、如何实现两个盒子的左右对齐
总结有很多的布局效果标准流没有办法完成此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。
浮动最典型的应用可以让多个块级元素一行排列显示。
网页布局第一准则多个块级元素纵向排列找标准流多个块级元素横向排列找浮动。
四什么是浮动
float属性用于创建浮动框将其移动到一边直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法 选择器{ float: 属性值; }
属性值描述none元素不浮动默认值left元素向左浮动right元素向右浮动
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮动/titlestyle.one {float: left;width: 200px;height: 200px;background-color: pink;}.two {float: left;width: 200px;height: 200px;background-color: skyblue;}/style
/head
bodydiv classone/divdiv classtwo/div
/body
/html 五浮动特性重点
1、浮动元素会脱离标准流脱标
脱离标准普通流的控制浮移动到指定位置动浮动的盒子不再保留原先的位置
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮动特性/titlestyle.one {float: left;width: 200px;height: 200px;background-color: pink;}.two {width: 300px;height: 300px;background-color: skyblue;}/style
/head
bodydiv classone浮动的盒子/divdiv classtwo标准流的盒子/div
/body
/html 2、浮动的元素会一行内显示并且元素顶部对齐
如果多个盒子都设置了浮动则它们会按照属性值一行内显示并且顶端对齐排列。浮动的元素是互相贴靠在一起的不会有缝隙如果父级宽度装不下这些浮动的盒子多出的盒子会另起一行对齐 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮动特性/titlestylediv {float: left;width: 200px;height: 200px;background-color: pink;}.two {background-color: purple;height: 250px;}.four {background-color: skyblue;}/style
/head
bodydiv1/divdiv classtwo2/divdiv3/divdiv classfour4/div
/body
/html 3、浮动的元素会具有行内块元素的特性
任何元素都可以浮动不管原先是什么模式的元素添加浮动之后具有行内块元素相似的特性如果块级盒子没有设置宽度默认宽度和父级一样宽但是添加浮动后它的大小根据内容来决定浮动的盒子中间是没有缝隙的是紧挨着一起的行内元素同理
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮动特性/titlestylespan,div {/* 如果不加浮动那么span没有显示因为行内元素不能指定宽高。但是加了浮动具有行内块元素的特性 *//* 也就是行内元素有了浮动则不需要转换为块级/行内块元素就可以直接给高度和宽度 */float: left;width: 200px;height: 100px;background-color: pink;}p {float: right;height: 200px;background-color: purple;}/style
/head
bodyspan/spanspan/spandivdiv/divpppppppp/p
/body
/html 六浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置网页布局一般采取的策略是先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置符合网页布局第一准则。
网页布局第二准则先设置盒子大小之后设置盒子的位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title浮动布局练习/titlestyle.box {width: 1226px;height: 615px;background-color: pink;margin: 0 auto;}.left {float: left;width: 234px;height: 615px;background-color: purple;}.right {float: left;width: 992px;height: 615px;background-color: skyblue;}.rightdiv {float: left;width: 234px;height: 300px;background-color: pink;margin-left: 14px;margin-bottom: 14px;}/style
/head
bodydiv classboxdiv classleft1/divdiv classrightdiv1/divdiv2/divdiv3/divdiv4/divdiv5/divdiv6/divdiv7/divdiv8/div/div/div
/body
/html 二、常见网页布局 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title常见的网页布局/titlestyle* {margin: 0;padding: 0;}li {list-style: none;}/* 只要是通栏的盒子和浏览器一样宽不需要指定宽度 */.top {height: 50px;background-color: gray;}.banner {width: 980px;height: 150px;background-color: gray;margin: 10px auto;}.box {width: 980px;height: 300px;margin: 0 auto;background-color: pink;}.box li {float: left;width: 237px;height: 300px;background-color: gray;margin-right: 10px;}.box .last {margin-right: 0;}.footer {height: 200px;background-color: gray;margin-top: 10px;}/style
/head
bodydiv classtoptop/divdiv classbannerbanner/divdiv classboxulli1/lili2/lili3/lili classlast4/li/ul/divdiv classfooterfooter/div
/body
/html 浮动布局注意点
1、浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置之后内部子元素采取浮动排列左右位置
2、一个元素浮动了理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子如果其中一个盒子浮动了那么其他兄弟也应该浮动以防止引起问题。浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流。
三、清除浮动
一为什么要清除浮动
问题前面浮动元素有一个标准流的父元素他们有一个共同的特点都是有高度的。但是所有的父元素都必须有高度吗 理想中的状态让子盒子撑开父亲有多少孩子父盒子就有多高。但是不给父盒子高度会有问题吗
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title为什么要清除浮动/titlestyle.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}/style
/head
bodydiv classboxdiv classone1/divdiv classtwo2/div/div
/body
/html 由于父级盒子很多情况下不方便给高度但是子盒子浮动又不占有位置最后父级盒子高度为0时就会影响下面的标准流盒子。 由于浮动元素不再占用原文档流的位置所以它会对后面的元素排版产生影响
二清除浮动的本质
清除浮动的本质是清除浮动元素脱离标准流而造成的影响如果父盒子本身有高度则不需要清除浮动清除浮动之后父级就会根据浮动的子盒子自动检测高度。父级有了高度就不会影响下面的标准流了
语法 选择器{ clear: 属性值;}
属性值描述left不允许左侧有浮动元素清除左侧浮动的影响right不允许右侧有浮动元素清除右侧浮动的影响both同时清除左右两侧浮动的影响 实际工作中几乎只用clear: both;
清除浮动的策略是闭合浮动
三清除浮动的方法
额外标签法也称为隔墙法是W3C推荐的做法父级添加overflow属性父级添加after伪元素父级添加双伪元素
1、额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如div styleclear: both/div或者其他标签如br /等。
优点通俗易懂书写方便缺点添加许多无意义的标签结构化比较差注意要求这个新的空标签必须是块级元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title清除浮动之额外标签法/titlestyle.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}.clear {clear: both;}/style
/head
bodydiv classboxdiv classone1/divdiv classtwo2/divdiv classclear/div/div
/body
/html
2、父级添加overflow属性 可以给父级添加overflow属性将其属性值设置为hidden、auto或scroll。
优点代码简洁缺点无法显示溢出的部分
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title清除浮动之overflow/titlestyle.box {/* 清除浮动 */overflow: hidden;width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}/style
/head
bodydiv classboxdiv classone1/divdiv classtwo2/div/div
/body
/html 3、父级添加after伪元素
:after方式是额外标签法的升级版。也是给父元素添加。
优点没有增加标签结构更简单缺点照顾低版本浏览器代表网站百度、淘宝网、网易等
.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {/* IE6、7专有 */*zoom: 1;
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title清除浮动之afer伪元素/titlestyle.clearfix:after {content: ;display: block;height: 0;clear: both;visibility: hidden;}.clearfix {/* IE6、7专有 */*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}/style
/head
bodydiv classbox clearfixdiv classone1/divdiv classtwo2/div/div
/body
/html 4、父级添加双伪元素
优点代码更简洁缺点照顾低版本浏览器代表网站小米、腾讯等
.clearfix:before,
.clearfix::after {content: ;display: table;
}
.clearfix::after {clear: both;
}
.clearfix {*zoom: 1;
}
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title清除浮动之双伪元素/titlestyle.clearfix:before,.clearfix::after {content: ;display: table;}.clearfix::after {clear: both;}.clearfix {*zoom: 1;}.box {width: 800px;border: 1px solid blue;margin: 0 auto}.one {float: left;width: 300px;height: 200px;background-color: purple;}.two {float: left;width: 200px;height: 200px;background-color: pink;}/style
/head
bodydiv classbox clearfixdiv classone1/divdiv classtwo2/div/div
/body
/html 四清除浮动总结
为什么要清除浮动
父级没高度子盒子浮动了影响下面布局了就应该清除浮动了
清除浮动的方式优点缺点额外标签法隔墙法通俗易懂书写方便添加许多无意义的标签结构化较差。父级overflow:hidden;书写简单溢出隐藏父级after伪元素结构语义化正确由于IE6-7不支持:after兼容性问题父级双伪元素结构语义化正确由于IE6-7不支持:after兼容性问题
四、常见的图片格式
1、jpg图像格式JPEG(JPG)对色彩的信息保留较好高清颜色较多产品类的图片经常使用jpg格式的。
2、gif图像格式GIF格式最多只能存储256色所以通常用来显示简单图形及字体但是可以保存透明背景和动画效果实际经常用于一些图片小动画效果。
3、png图像格式是一种新兴的网络图形格式结合了GIF和JPEG的优点具有存储形式丰富的特点能够保持透明背景。如果想要切成背景透明的图片请选择png格式。
4、PSD图像格式是Photoshop的专用格式里面可以存放图层、通道、遮罩等多种设计稿。对前端人员的最大有优点是可以从上面复制文字获得图片还可以测量大小和距离。
五、CSS属性书写顺序
1、布局定位属性display/position/float/clear/visibility/overflow建议display第一个写毕竟关系到模式
2、自身属性width/height/margin/padding/border/background
3、文本属性color/font/text-decoration/text-align/vertical-align/white-space/break-word
4、其他属性CSS3content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient...
