溢出处理、盒子模型、背景图片、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 ...
随机推荐
- java判断指定路径文件夹是否存在，若不存在则创建新的文件夹
File file = new File(dirPath); if (!file.exists()) { file.mkdirs(); }
- 【PHP】php实现二进制、八进制、十进制、十六进制之间各自转换的函数
<?php /* 常见的进制: 二进制 binary -----> bin 八进制 octal -----> oct 十进制 decimal -----> dec 十六进制 h ...
- Win7下msys64安装mingw工具链
1. 安装msys64 安装到指定目录, 例如C:\msys64 2. 命令行更新 运行msys2.exe打开命令行窗口, 执行命令 pacman -Syuu 3. 修改安装源 进入msys64/et ...
- pytorch 中conv1d操作
参考:https://blog.csdn.net/liujh845633242/article/details/102668515 这里我重点说一下1D卷积,2D卷积很好理解,但是1D卷积就不是那么好 ...
- PMP 第12~13章错题总结
1.合同解释应该遵循几个主要原则: 1)主导语言原则 2)适用法律原则 3)整体解释原则 4)公平诚信原则2.合同收尾包括的工作: 1)产品核实 2)可交付成果验收 3)财务结算 4)退还保证金或担保 ...
- JMETER - 连接MySQL数据库_函数助手_随机登录
1. 导入mysql-connect.jar包 2. 添加配置原件-jdbc connection config 3. 添加jdbc请求 填写信息 4. 连接数据库 OK 5. 增加语句:jdbc r ...
- [LeetCode] 734. Sentence Similarity 句子相似度
Given two sentences words1, words2 (each represented as an array of strings), and a list of similar ...
- Python删除文件，空文件夹，非空文件夹
首先,在Python中文件路径是这种格式: file_path1 = r'F:\test\1' 删除文件,命令 os.remove(file_path1) 删除空文件夹,命令 os.rmdir(fil ...
- Oracle Spatial分区应用研究之七：同等分区粒度下全局索引优于分区索引的原因分析
1.实验结论 同等分区粒度下,使用分区空间索引进行空间查询,比使用全局空间索引进行查询,对数据字典表的访问次数更多.假设分区数为X,则大概多3X次访问.具体说明见6实验结论. 2.实验目的 在之前的测 ...
- Mac多SSH Key配置
多SSH key配置 工作的时候碰到SSH配置的问题,就是公司用的是gittea的仓库,而本人的github平常也要使用,这个时候就需要配置不同的SSH key了.将同一个公钥分配配置给github和 ...