CSS布局常见元素

display

display 属性规定元素应该生成的框的类型。
每个HTML元素都有属于自己的默认display属性值。
可以通过display去更改HTML 行内元素（inline element） 和 HTML 行内元素（inline element） 的默认值。在我之前的HTML文档介绍中有解释两者的区别。

display:inline;

通过该属性值可以让块级元素以行内元素显示。

display:block;

通过该属性值可以让行内元素以块级元素显示。
例如：

 <style>div {display: inline;background-color:lightblue;}span{display:block;background-color:lightcoral;width: 150px;height: 150px;}</style><body><div>div1:是块级元素，但是现在以行内元素显示</div><div>div2:是块级元素，但是现在以行内元素显示</div><hr><span>span是行内元素，但是现在以块级元素显示</span>
</body>

行内元素：

不可以设置宽高度
不可以设置上下 margin
可以设置左右 margin

但如果将行内元素设置为块级元素，上面的不可以就可以了。
display还有以下常用属性值

none 此元素不会被显示。
flex 此元素将显示为弹性盒容器。
grid 此元素将显示为栅格容器。
inline-block 此元素将显示为行内块元素。

使用inline-block需要注意的是

vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top
需要设置每一列的宽度
如果 HTML 源代码中元素之间有空格，那么列与列之间会产生空隙

flex和grid比较重要，后面再写，待续。

visibility

visibility 属性规定元素是否可见。
它有以下属性值

visible 默认值。元素是可见的。
hidden 元素是不可见的。

display:none 和 visibility:hidden都可以让元素不可见，但是是有区别的：

display:none 元素消失，在页面中不占据空间
visibility:hidden 元素消失，在页面中仍占据空间

    <div><strong>给元素设置display:none样式</strong><p>A元素</p><p style='display:none;'>B元素</p><p>C元素</p></div><div><strong>给元素设置visibility:hidden样式</strong><p>A元素</p><p style='visibility:hidden;'>B元素</p><p>C元素</p></div>

float

浮动：元素脱离原有的标准文档流,移动到其父元素中指定的位置。
属性值有

none 默认值。元素不浮动。
left 元素向左浮动。
right 元素向右浮动。

常见的float浮动布局

两列布局

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>双列布局</title><style type="text/css">.left {width: 50%;background-color: pink;height: 400px;float: left;box-sizing: border-box;padding: 20px;}.right {width: 50%;background-color: lightblue;height: 400px;padding: 20px;float: left;box-sizing: border-box;}</style>
</head>
<body><div class="left">left</div><div class="right">right</div>
</body>
</html>

三列布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>双列布局</title><style type="text/css">div {height: 300px;}.left {background-color: pink;width: 33.33%;float: left;padding: 20px;box-sizing: border-box;}.middle {background-color: cornsilk;width: 33.33%;float: left;padding: 20px;box-sizing: border-box;}.right {background-color: lightblue;width: 33.33%;float: right;padding: 20px;box-sizing: border-box;}</style>
</head>
<body><div class="left">left</div><div class="right">right</div><div class="middle">middle</div>
</body>
</html>

其中浮动是讲究一个先来后到的顺序。

清除浮动clear属性

浮动的元素离开了原有的文档流,它会对页面中其他元素的排版产生影响。为了消除这种影响
可以使用clear属性消除浮动。

left：清除左侧的浮动影响
right：清除右侧的浮动影响
both：清除左右两侧的浮动影响

设置 float会影响其他相邻元素；

设置 clear 只会影响自身，不会对其他相邻元素造成影响。

定位postion属性

position 属性规定元素的定位类型。

position:static

static 是 position 属性的默认值。

static 定位所导致的元素位置，是浏览器自主决定的，所以这时 top、bottom、left、right 这四个属性无效。

position:relative

相对定位：元素以它所在的普通流中的位置为起始点进行定位(设置坐标)。

搭配 top、bottom、left、right 这四个属性一起使用

 <style type="text/css">.top{background-color: lightblue;width: 100px;height: 100px;}.bottom{background-color: lawngreen;width: 150px;height: 150px;/* position: relative;top: 20px;left: 30px; */}</style>
<body>    <div class="top">top</div><div class="bottom">bottom</div>
</body>

当给代码添加定位代码时,效果为

     position: relative;top: 20px;left: 30px;

当给top元素加float:left;让top元素脱离正常文档流时，bottom就以正常的文档流位置进行定位偏移。

    .top{background-color: lightblue;width: 100px;height: 100px;float: left;}.bottom{background-color: lawngreen;width: 150px;height: 150px;position: relative;top: 20px;left: 30px; }

position:absolute

absolute 表示，相对于上级元素（一般是父元素）进行偏移，定位基点是父元素。

重要的限制条件：
定位基点（一般是父元素）不能是 static 定位，否则定位基点就会变成整个网页的根元素 html

搭配 top、bottom、left、right 这四个属性一起使用。
修改上面的代码,去除top浮动属性，并且将bottom的position属性值由relative改成absolute。

    .top{background-color: lightblue;width: 100px;height: 100px;}.bottom{background-color: lawngreen;width: 150px;height: 150px;position: absolute;top: 20px;left: 30px; }

效果为

absolute 定位的元素会被"正常页面流"忽略。

在"正常页面流"中，该元素所占空间为零，周边元素不受影响。
绝对定位的元素的位置是相对于最近的父元素而言的
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index 的值越高，它显示的越在上层
- z-index属性默认值是0；

position:fixed

fixed 表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。
这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

position:sticky

sticky 跟前面四个属性值都不一样，它会产生动态效果。

一些时候是 relative 定位（定位基点是自身默认位置），另一些时候自动变成 fixed 定位（定位基点是视口）。
必须搭配top、bottom、left、right这四个属性一起使用，不能省略。
可以用这个属性做到手机的电话簿字母处的效果。

本章内容已经完结

附一张作业图效果：
代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>驴妈妈旅游网</title><link rel="stylesheet" href="css/style.css">
</head><body><header><div class="one"><img src="img/1.jpg" alt=""></div><div class="two"><div id="img1"><img src="img/3.png" alt="" height="60px"><img src="img/1.png" alt="" height="40px"></div><div id="img2"><img src="img/10.png" alt=""></div></div></header><nav><ul><li><a href="#">首页</a></li><li><a href="#">出镜游</a></li><li><a href="#">国内游</a></li><li><a href="#">周边游</a></li><li><a href="#">景点门票</a></li><li><a href="#">度假酒店</a></li><li><a href="#">自驾游</a></li><li><a href="#">亲子游</a></li><li><a href="#">邮轮</a></li><li><a href="#">机票</a></li><li><a href="#">机票</a></li><li><a href="#">特卖会</a></li><li><a href="#">定制游</a></li><li><a href="#">金融</a></li><li><a href="#">旅游攻略</a></li></ul></nav><main><div id="s1"><div id="aside"><div style="background-color: white;"><a href="" style="color: black; font-family: '宋体'">跟团游</a></div><div><a href="">自由行</a></div><div><a href="">景点门票</a></div><div><a href="">度假酒店</a></div><div><a href="">邮轮</a></div><div style="border:none"><a href="">签证</a></div></li></ul></div><div id="left"><form action=""><div id="search"><div class="sear1"><label for="chufa">出发地：</label><br><input type="text" name="chufa" id="" value="西安" size="11"></div><div class="sear2"><label for="mudi">目的地：</label><br><input type="search" name="mudi" size="25" placeholder="请输入目的地、主题、或关键词"></div></div><div class="button1"><button type="submit">&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;</button></div></form><div id="list1"><div class="guonei1">国内热门</div><div class="guonei2"><ul><li>华山</li><li>华清宫</li><li>云南</li><li>三亚</li><li>北京</li><li>九寨沟</li><li>张家界</li><li>桂林</li><li>厦门</li><li>东北</li><li>华东</li></ul></div></div><div id="list2"><div class="zhuti1">热门主题</div><div class="zhuti2"><ul><li>华山</li><li>华清宫</li><li>云南</li><li>三亚</li><li>北京</li><li>九寨沟</li><li>张家界</li><li>桂林</li><li>厦门</li><li>东北</li><li>华东</li></ul></div></div></div></div></main>
</body></html>

* {margin: 0;padding: 0;
}header {width: 100%;margin: auto;background-color: lightskyblue;
}.one {height: auto;background-color: white;
}.one>img {margin: 0 auto;width: 100%;
}.two {height: 70px;background-color: white;margin: auto;
}#img1 {width: 70%;height: 70px;float: left;
}#img2 {height: 70px;width: 30%;margin-left: 70%;}#img2>img {height: 50px;margin: auto;margin-top: 10px;
}nav {min-height: 40px;background-color: MediumVioletRed;clear: both;padding-left: 20px;line-height: 40px;
}nav ul{display: inline-block;text-align: center;
}nav li{display: inline-block;font-size: small;list-style: none;padding-right: 10px;width: 55px;
}
div li {display: inline-block;font-size: small;list-style: none;text-align: center;
}
div li {display: inline-block;font-size: small;list-style: none;padding-right: 10px;text-align: center;
}a {color: white;font-weight: bold;text-decoration: none;}
nav> ul> li:hover{background-color: rgb(97, 14, 67);
}main {background-image: url("../img/9.jpg");background-color: moccasin;background-repeat: no-repeat;background-size: 100%;padding: 10px;
}#s1 {margin-top: 10px;margin-left: 10px;background-color: white;max-width: 490px;max-height: 100%
}#aside {width: 25%;max-height: 300px;background-color: #94937e;float: left;
}#left {width: 75%;max-height: 300px;margin-left: 25%;
}#aside>div {width: auto;height: 50px;text-align: center;line-height: 50px;border-bottom: 1px dotted gray;font-size: small;
}#search {background-color: rgb(255, 255, 255);padding: 10px;
}.sear1 {width: 40%;height: 50%;float: left;line-height: 25px;font-size: 5px;color: lightgrey;padding-top: 30px;box-sizing: border-box;
}.sear2 {width: 60%;height: 50%;margin-left: 40%;line-height: 25px;font-size: 5px;color: lightgrey;padding-top: 28px;box-sizing: border-box;
}.button1 {height: 30px;text-align: right;border-bottom: 1px solid lightgray;padding-right: 10px;
}button {background-color: MediumVioletRed;color: white;border-radius: 5px;padding: 2px;
}#list1,
#list2 {padding: 10px;
}.guonei1,
.zhuti1 {width: 20%;height: 90px;float: left;color: lightgrey;font-size: 15px;
}.guonei2,
.zhuti2 {width: 80%;height: 90px;margin-left: 20%;line-height: 20px;font-size: 15px;
}

CSS传统布局所用的元素相关推荐

css flew 布局解决父元素高度不固定，子级居中。
给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中转载于:https://www.cn ...
CSS 7：网页布局（传统布局，flex布局，布局套路）
传统布局一栏.两栏.三栏布局一栏布局特点:页面内容居中,宽度固定实现方式: 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px; margin-lef ...
前端学习总结——CSS布局方式之传统布局
传统布局传统布局即是早期在平板电脑.智能手机等移动设备并不流行的时候使用的布局方式. 一.表格布局例如:采用表格方式实现如下简单模型的布局 (1)固定布局即用具体的像素值来确定模型的宽和高等值. ...
css清除浮动的几种方法_CSS 分享几种传统布局方法[上]
本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一．布局模型在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向PC ...
CSS网页布局之传统解决方案与Flex大法
网页布局主要包括全屏布局,水平居中,垂直居中和sticky Footer布局.本文针对网页布局的实现,利用传统的解决方案(display + position + float + table)与Fle ...
使用CSS网格布局放置元素的七种方法
在这里,重点将完全放在使用CSS Grid在Web上布置元素的特定方式.现在,让我们逐一检查它们. 解决浏览器对网格布局的支持目前,网格布局尚未获得一致的浏览器支持.但是,截至2017年3月,默认情 ...
一、CSS弹性布局[弹性盒子、弹性元素]
一.CSS弹性布局 1.弹性盒子弹性盒子的属性全都是写在父元素上面 1.1基础解释:在父元素上写上display:flex;或者display:inline-flex;子元素就会出现弹性效果,其中 ...
css Table布局：基于display:table的CSS布局
两种类型的表格布局你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...
css 列布局,CSS二列三列布局
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法二列&三列布局: image.png 二列布局的特征通常是侧栏固定宽度,主栏自适应宽度三列布局的特征通常 ...

CSS传统布局所用的元素

目录