溢出处理、盒子模型、背景图片、float（浮动）
一、overflow:溢出内容的处理
overflow:hidden; 溢出内容隐藏(在父元素内使用,可以清除子元素浮动对父元素的影响)
overflow:auto; 自动滚动(有溢出产生滚动，没有就不产生滚动条)
overflow:scroll; 不管有没有溢出均产生滚动条
二、盒子模型：
margin(外边距)、border(边框)、padding(内间距)、内容区域
1.w3c盒子模型(默认盒子模型-标准的盒子模型)：
a.w3c盒子模型设置的宽高为内容区的宽高;
b.padding(内间距)、border(边框)、margin(外边距)均属于所设置宽高外的部分；
c.盒子宽高：border宽高+padding宽高+内容区域宽高【设置的宽高】
d.所占屏幕宽高：盒子宽高+margin宽高
2.ie盒子模型
a.ie盒子模型设置的宽高为盒子宽高
b.盒子宽高【设置的宽高】：border宽高+padding宽高+内容区域宽高
c.所占屏幕宽高：盒子宽高+margin宽高
3.两种盒子的比较代码如下：
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
}
.one{
background-color: teal;
/*width: 80px;
height: 80px;*/
padding: 10px;
box-sizing: border-box; border-left: 10px solid cyan;
border-bottom: 10px solid coral;
border-right: 10px solid cyan;
border-top: 10px solid coral;
}
</style>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
三、border属性：
1.border-radius:5px(或百分比); 设置边框圆角
2.border-top-left-radius: 40px; 设置左上角边框圆角
3.border-bottom-right-radius: 40px; 设置右下角边框圆角
4.如果设置子元素圆角且父元素有背景颜色则父子元素均需要设置圆角边框：
eg：
<style type="text/css">
div{
width: 200px;
height:200px;
background-color: pink;
}
.inner,.outer{
border-radius: 30px;
}
.inner{
background-color: teal;
}
</style> <body>
<div class="outer">
<div class="inner"> </div>
</div>
</body>
四、background属性：
1.background-image:url(图片路径); 设置背景图片
2.background-repeat:(背景图片平铺方式)
eg：
<style>
/*背景图片重复出现的方式*/
background-repeat: no-repeat;
/*在x方向铺满一行*/
background-repeat: repeat-x;
/*在y方向平铺一列*/
background-repeat: repeat-y;
/*默认的铺满整个区域*/
background-repeat: repeat;
</style>
3.background-size:100% 100%;(宽、高) 设置背景图片大小
4.图片精灵技术：(在元素区域内显示背景图片中指定区域图像)
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片精灵技术</title>
<style type="text/css">
div{
width: 153px;
height: 156px;
background-image: url(./images/QQ图片20190620112449.jpg);
}
.one{
/*设置背景图片的位置*/
background-position: -113px -120px;
}
.two{
background-position: -633px -652px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
5.background-attachment： 固定显示图片背景
实例代码：
<style type="text/css">
body{
background-image: url(./images/d2a9ccbfe758a6619d25d0299257f860.jpg);
/*背景图片绑定的位置，视口区？元素*/
/*1、固定背景 不随滚动条的滚动而滚动*/
background-attachment: fixed;
/*2、默认的 随着滚动条滚动*/
background-attachment: scroll;
}
</style>
五、float(浮动)【清除浮动】
1、清除兄弟元素间的浮动影响（clear:both;）
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
/*浮动文字不会被覆盖*/
.one{
height: 200px;
background-color: red;
/*左浮动 浮动元素脱离文档流 原来的位置不保留*/
float: right;
}
.two{
background-color: orange;
float: right;
}
.three{
background-color: yellow;
/*margin-top: 100px;*/
/*清除其他元素的浮动对自身元素(位置等)产生的影响*/
/*清除兄弟元素的浮动*/
/*clear: both;*/
float: right;
}
.four{
background-color: green;
float: right;
}
.five{
background-color: blue;
/*float: right;*/
clear: both;
}
.six{
background-color: cyan;
/*float: right;*/
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
<div class="five">five</div>
<div class="six">six</div>
</body>
</html>
2、清除子元素浮动对父元素的影响： (overflow:hidden;)
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父子浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
border: 1px solid blue;
list-style: none;
/*清除浮动 给父元素设置了高度*/
/*overflow: hidden;*/
}
li{
border: 1px solid red;
width: 100px;
height: 100px;
float: left;
}
div{
width: 100px;
height: 100px;
background-color: cyan; /*清除浮动*/
clear: both;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</body>
</html>
3、使用伪元素::after清除浮动(或使用无高的空兄弟div再清除兄弟浮动)
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素清除浮动</title>
<style type="text/css">
.inner{
width: 200px;
height: 100px;
background: cyan;
float: left;
}
.one{
width: 200px;
height: 100px;
background: coral;
}
/*
伪元素::after或:after【CSS2.1中的伪元素表示】(二者等价只不过是css版本的表示形式不一样)
在未设置高度的父容器使用::after伪元素添加一个额外的元素，对该元素使用清除兄弟浮动
其实在需要清除浮动的元素后面使用一个没有高度的空div再进行兄弟清除浮动也是可以的，而且这样还不需要借助于父元素
*/
.outer::after{
content: "";
display: block;
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">inner</div>
</div>
<div class="one">我是inner div后面的兄弟div</div>
</body>
</html>
溢出处理、盒子模型、背景图片、float（浮动）的更多相关文章
- css盒子模型，定位，浮动
1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. ...
- CSS 盒子模型、RestCSS、浮动、定位
盒子模型 边框:border 左边框:border-left 右边框:border-right 上边框:border-top 下边框:border-bottom 复合样式:border 边框颜色:bo ...
- css基础-盒子模型+背景和列表
border-style的值: none 无 dotted 点状 dashed 虚线 solid 实线 double 双实线 margin: 垂直方向两个相邻元素都设置了外边距,那么外边距会发生合并 ...
- CSS - 插入图片img和背景图片
1. img插入图片,用的最多,比如产品展示类 .section img { width: 200px;/* 插入图片更改大小 width 和 height */ height: 210px; mar ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- python 之 前端开发（盒子模型、页面布局、浮动、定位、z-index、overflow溢出）
11.312 盒子模型 HTML文档中的每个元素都被比喻成矩形盒子, 盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- 从零开始学 Web 之 CSS（三）链接伪类、背景、行高、盒子模型、浮动
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 边框，元素居中，盒子模型，margin,display,overflow,textarea,float,浮动停止条件，清除浮动影响，margin-top的bug，清除默认样式
边框 solid实线 dotted虚线 dashed点线 盒子在页面中实际的宽高都是5部分组成 宽=borderleft+paddingleft+width+paddingright+borderri ...
随机推荐
- Kibana启动后外网访问不了
问题 Kibana启动后,使用外网访问 http://ip地址:5601 访问不了日志中最后显示 "statusCode":302 ,在控制台 curl http://localh ...
- Nginx接入gPRC
gPRC官网:https://grpc.io/ NGINX将在1.13.10版本中包含grpc相关功能 这个版本支持NGINX代理gRPC TCP连接.可以用来: 发布gRPC服务,包括未加密/加密的 ...
- Java类成员初始化顺序
类中包含7中成员:1.静态变量 static2.final静态常量 final static3.静态代码块 static{} //多个代码块顺序执行 4.普通变量5.普通代码块 {} //多个代码 ...
- Embed MP4 in HTML using flash-player(html5 video player)
https://stackoverflow.com/questions/1000851/embed-mp4-in-html-using-flash-player ******************* ...
- Hadoop的三种调度器FIFO、Capacity Scheduler、Fair Scheduler（转载）
目前Hadoop有三种比较流行的资源调度器:FIFO .Capacity Scheduler.Fair Scheduler.目前Hadoop2.7默认使用的是Capacity Scheduler容量调 ...
- Python Linux系统管理与自动化运维
Python Linux系统管理与自动化运维 前言 第1章Python语言与Linux系统管理1 1.1Python语言有多流行1 1.2Python语言为什么流行3 1.3Python语言有什么缺点 ...
- Windows下启动、重启、停止nginx
在Windows下操作nginx,需要打开cmd 进入到nginx的安装目录下 1.启动nginx: start nginx 或 nginx.exe 2.停止nginx(stop是快速停止nginx, ...
- DELPHI 数据库控件心得
TField对象的SetText和GetText事件处理函数 使用TField对象的SetText和GetText事件处理函数可方便的解决字段的代码与代码所对应值的显示问题 TSimpleDatase ...
- 阿里开源 OpenJDK 发行版 Dragonwell
日有消息显示,阿里将于 21 日重磅发布其 OpenJDK 发行版 Alibaba Dragonwell. 我们知道 OpenJDK 是基于 GPL v2/Classpath Exception 的 ...
- CSP2019初赛游记
没想到居然ak了,就纪念一下吧. 这次的联赛,只能说是高三生活的一缕杂音了吧. 这次,我的心态可以说是非常平稳了.毕竟不再会有竞赛生涯的压力,也不会有患得患失的惶恐.不过也许我开考前的放声唱歌惊扰了一 ...