本文详细介绍了CSS中的盒子模型，包括content、padding、border、margin的组成及各自属性，以及box-sizing属性的使用。此外，还探讨了display属性的block、inline、inline-block、none等值的区别，标签分类、标签嵌套规范、溢出隐藏、透明度与手势的实现。文章还涵盖了CSS默认样式、CSS reset以及浮动定位的相关知识点，旨在帮助读者深入理解CSS布局原理。
文章目录
1.CSS盒子模型
1.1简介组成元素
- 组成: content -> padding -> border -> margin
物品 填充物 包装盒 盒子与盒子之间的间距- content :内容区域width和height组成的
- padding :内边距(内填充)
只写一个值:3opx(上下左右)
写两个值: 3opx 4opx(上下、左右)
写四个值: 3opx 4opx 50px 6epx(上、右、下、左)- 单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom- margin :外边距(外填充)
只写一个值:3opx《上下左右)
写两个值: 3opx 4opx（上下、左右)
写四个值:30px 4epx 50px 6epx（上、右、下、左)- 单一样式只能写一个值:
margin-left
margin-right
margin-top
margin-bottom
注:
- 背景色填充到nargin以内的区域(不包括margin区域)
- 文字在content区域添加。
- padding不能为负数，而margin可以。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
box{
width:20opx; height : 200px; background: red; border:10px transparent solid;padding : 30px 50px;
margin: -10px;
}
#box2{ width:200px; height:200px; background:口black; color:white;}</style>
</head>
<body>
<div id="box">这是一个盒子</div><div id="box2">又是一个盒子</div></body>
</html>
1.2box-sizing
盒尺寸，可以改变盒子模型的展示形态。
默认值:content-box : width、height ->content
border-box : width. height ->content padding border
使用的场景:
- 不用再去计算些值
- 解决一些100%的问题
- 盒子模型的一些问题
当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题只在上下有，左右是没有这个叠加问题的。
- margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
- margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
- 解决方案
1. BFC规范
2. 给父容器加边框
3. margin换成padding
1.3 CSS盒子拓展
- margin左右自适应是可以的，但是上下自适应是不行的。
(如果想实现上下自适应的话，需要在第二大部分来进行学习)- width、height不设置的时候,对盒子模型的影响，会自动计算容器大小
1.4 盒子嵌套练习
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width， initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1{ width:350px; height: 350px; border:1px black dashed; padding:27px;}#box2{ border :5px #d7effe solid; padding : 20px;}
#box3{ background:#ffaodf; padding:41px; }
#box4{ border:1px white dashed; padding: 3px;}#box5{ border: 1px white dashed; padding: 49px;}
#box6{ width:10opx; height:100px; background:#96ff38; border:#fcff00 5px solid;}</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.标签分类
2.1 - 按类型
block : div、p、ul、li、h1 …
- 独占一行
- 支持所有样式
- 不写宽的时候，跟父元素的宽相同4．所占区域是一个矩形
inline : span . a、em、 strong、 img …
- 挨在一起的
- 有些样式不支持,例如:width、height、margin、padding3．不写宽的时候，宽度由内容决定
- 所占的区域不一定是矩形
- 内联标签之间会有空隙，原因:换行产生的
inline-block : input、 select- 挨在一起，但是支持宽高
注:布局一般用块标签，修饰文本一般用内联标签
2.2- 按内容
- Flow:流内容
- Metadata :元数据
- Sectioning :分区
- Heading:标题
- Phrasing:措辞
- Embedded:嵌入的
- Interactive :互动的
(详情:https://www.w3.org/TR/html5/dom.html)
2.3- 按显示
替换元素:浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input…
非替换元素:将内容直接告诉浏览器，将其显示出来。
div、h1、p…
3.display显示框类型
3.1属性值：block / inline / inline-block / none
- 1）inline：默认值，此元素会被显示为内联元素，元素前后没有换行符。
- 2）block：此元素将显示为块级元素，此元素前后会带有换行符。
- 3）inline-block：行内块元素
- 4）none：此元素不会被显示
3.2display: block inline inline-block none …区别
display:null不占空间的隐藏
visibility: hidden占空间的隐藏
4.标签嵌套规范
ul、li
dl、dt、dd
table、tr、td
- 块能够嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
- 块嵌套块
<div>
<div></div>
</div>
- 特殊;
错误的写法:
<p>
<div></div>
</p>
- 内联是不能嵌套块
错误的写法:
<span>
<div></div>
</span>
- 特殊:
正确的写法:
<a href="#">
<div></div>
</a>
5.溢出隐藏
overflow :
visible :默认,内容不会背修剪，超出会在元素框外面
div{width: 300px; height: 300px; border: 3px black solid;
overflow: visible}
hidden//内容会被隐藏，多余不可见
div{width: 300px; height: 300px; border: 3px black solid;
overflow: hidden;}
scroll//无论是否溢出都会显示水平和锤子的两个滚动条
div{width: 300px; height: 300px; border: 3px black solid;
overflow: scroll;}
autox轴、y轴//根据是否溢出自动显示滚动条以查看其余内容或隐藏滚动条
div{width: 300px; height: 300px; border: 3px black solid;
overflow: auto;}
overflow-x、overflow-y针对两个轴分别设置
6.透明度与手势
6.1透明度
6.1.1opacity属性
① 取值为 0(透明) ~ 1(不透明)，例如0.5表示半透明
注：当透明度为0时，也占空间
②有opacity属性的所有后代元素都会继承 opacity 属性，所以其所有的子内容也会透明
6.1.2raba属性
①格式：
background:rgba（r, g, b, a)
②其中a（alpha）控制透明度，取值同样为0~1，它可以让指定的样式透明，而不影响其他的样式。可用于制作透明的边框、透明背景图片等
6.2手势
6.2.1格式
cursor :手势
6.2.2属性值
default :默认箭头
①default：默认，通常是一个箭头。
②pointer：手形光标。就像通常用户将光标移到超链接上时那样。
③move : 十字箭头光标。用于标示对象可被移动。
④help : 带有问号标记的箭头。用于标示有帮助信息存在。
⑤text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
⑥自定义光标：cursor: url(路径), auto。图片类型需要是.cur或.ico格式。
要实现自定义手势:
准备图片:.cur . .ico
cursor : url(-/img/ cursor.ico) ,auto;
7.最大、最小宽高?
min-width、 min-height//最小>=
max-width、 max-height//最大<=
%单位:换算->已父容器的大小进行换算的
一个容器怎么适应屏幕的高︰
容器加 height:100%; body:100%; html:100%;
html , body{ height: 10o%; }
.contrainer{ height: 100%;}
8.CSS默认样式
有些标签有默认样式，有些标签没有默认样式。
没有默认样式:
div、span、…
有默认样式的:
body -> marign : 8px
h1 ->margin : 上下 21.440px
font-weight : bold
p->margin :上下 16px
ul ->margin : 上下16px padding :左40px
默认点:list-style : disc
a -> text-decoration: underline;
9.CSS reset
*{margin:e; padding:o;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
body ,p,h1,ul{ margin:e; padding:o;}
ul{ list-style : none;}
a{ text-decoration: none; color:#999;}
img{ dispaly: block}
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline;基线对齐方式，默认值
img{ vertical-align:bottom;}解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
- 写结构
- css重置样式
- 写具体样式
10.PS基本操作与图片格式
10.1- photoshop使用?
组成:
菜单项
工具栏
辅助面板
下载:
https://pan.baidu.com/s/1LVa5R_btsjczLBwskczido提取码:sc3v
快捷键:
ctrl +r :显示隐藏标尺在标尺
上可以拖拽参考线
可以通过移动工具拖拽回去，也可以在视图菜单中选择清除所有的参考线
图层中的小眼睛可以对当前图层进行显示隐藏
alt +滚轮:可以对图片进行放大缩小
10.2 photoshop切图
png等图片的切图流程
- 通过矩形远框工具,选择指定的区域
微调: alt 减少区域 shift 增加区域 上下左右键进行微调
利用参考线记录量取的位置，以便以后测量其他的值- ctrl +c:复制图层
- ctrl +n:新建图层
- ctrl +v:粘贴图层
- 存储为web格式
<! DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin : o; padding: 0;}ul{ list-style: none;}
img{ display: block; }
a{ text-decoration: none; color: #666666;}
h1, h2,h3,h4,h5,h6{ font-size:16px; font-weight: normal;}
#main{ margin:20px auto; width:238px; border: 1px solid
#d9edee; border-top: 3px#ff8400 solid; }
#main h2{ height:35px; border-bottom:1px solidd9eoee; line-height: 35px; padding-left:11px;}main h2 a{ color:black;}
#tmain h2 a: hover{ color: #ff8400;}
#main div img{ margin:8px auto 3px auto;}
#main ul{ font-size:12px; line-height: 24px; margin-bottom: 8px;}
#main ul li{ padding-left:18px; background: url(./img/dot.png) no-repeat 8px center;}
#main ul li.first-line{ border-bottom:1px solid d9eoee; padding-bottom:3px; margin-bottom:8pX;}
#main ul af
#main ul a:hover{ color:#ff8400; text-decoration: underline;}</style>
< / head>
<body>
<div id="main">
<h2>
<a href="#”>探索趣图</a></h2>
<div>
a href="#"">
<img src="./img/img.png" alt=""></a>
</div><ul>
<li class="first-line">
<a href=""#”>测试文字测试文字测试文字</a></li>
<li>
<a href="#”>测试文字测试文字测试文字</a></li>
<li>
l<a href="#”>测试文字测试文字测试文字</a></li>
</ul></div< / body>
</html>
psd图片切图流程
PS版本
cc自动切图
启动生成器图像资源
10.3企业切图
企业切图流程
利用工具快速获取样式
蓝湖:https://lanhuapp.com
11.float浮动
脱离文档流，延迟父容器靠左或靠右进行排列。
left、right、none
< ! DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{ border:1px black solid;}
#box1{ width:100px; height: 100px; background:yellow; float:right;}#box2{ width: 20opx; height: 20opx; background: red; float:right;}</style>
</ head>
<body>
<div id="box1"></div><div id="box2"></div></ body>
</html>
- float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列。
主要给块元素添加,但也可以给内联元素添加。
- 如何清除浮动?
上下排列:clear属性,表示清除浮动的,left、right、 both
嵌套排列:
固定宽高:不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范)，如果有子元素想溢出，那么会受到影响。
display : inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签︰不推荐，会多添加一个标签。
after伪类︰推荐，是空标签的加强版，目前各大公司的做法。
(clear属性指挥操作块标签，对内联标签不起作用)
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*#box1{ width: 10opx; height: 100px; background:red; float:left;}#box2{ width:200px; height :20opx; background :blue; clear:both; }*/
#box1{ width:20opx; border:1px Oblack solid; display: inline-block;}#box2{ width: 10opx; height: 20opx; background:Ored; float:left;}
</styie>
< /head>
<body>
<l-- <div id="box1"></div><div id="box2"></div> -->
<div id="box1">
l<diy id="box2"></div></div>
aaaaaaa</ body>
</html>
扫一扫
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
