CSS学习笔记（内边距~文字在盒子里的垂直居中）

内边距
1.内边距就是内容和边框之间的距离。
2.格式
2.1.非连写

.san1{width: 100px;height:100px;border: 1px solid black;padding-top: 20px;padding-left: 20px;padding-bottom: 20px;padding-right: 20px;}

2.2.连写

{padding:上 右 下 左;
}

省略的规律同边框属性。
注意：
1.在设置内边距之后，div的大小会发生变化，原来的+内边距的大小
2.有边框属性才会有内边距属性。
3.内边距也会有背景颜色。
外边距
1.外边距就是标签和标签之间的距离。
2.格式
2.1非连写

.san1{width: 100px;height:100px;border: 1px solid black;margin-top: 10px;margin-left: 10px;margin-bottom: 10px;margin-left: 10px;}

2.2连写

margin:上 右 下 左;

3.应用
用

body{margin: 0px;
}

来消除网页和浏览器之间的距离。
注意
1.没有设置外边距margin属性时，会发现两个标签之间仍旧存在一段距离，这是因为字符实体的原因，HTML将回车自动当做1个空格来识别。
2.margin那一部分没有背景颜色。
外边距合并现象
在默认布局的垂直方向上，默认情况下外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的。
盒子模型
1.HTML中的所有标签都是盒子模型 content+padding+border+margin
2.盒子模型的宽度和高度
2.1 content的宽度和高度
通过标签设置的width和height
2.2 元素的宽度和高度
宽度=左边框+左内边距+width+右内边距+右边框
高度=上边框+上内边距+height+下内边距+下边框

border：50px;

注意：这相当于上、右、下、左的边框都为50px。

2.3 元素空间的宽度和高度
宽度=左外边距+元素的宽度+右外边距
高度=上外边距+元素的高度+下外边距
盒子box-sizing属性（CSS3新增属性）
怎么在增加border、padding时元素的大小仍旧保持不变（不采用直接增减content的宽、高）

box-sizing: border-box;/*和直接增减content的宽、高原理相同*/

box-sizing: border-box / content-box;
content-box元素的宽高=边框+内边距+设置的宽高
盒子居中
大盒子里面一个小盒子，让小盒子在大盒子里水平垂直居中。
1.padding(用padding挤下来)

.big{width: 500px;height: 500px;background-color: red;padding: 150px;/*大盒子和小盒子之间的距离，小盒子此时相当于大盒子的内容*/box-sizing: border-box;}
.small{width: 200px;height: 200px;background-color: green;margin: 150px;}

2.margin

.big{width: 500px;height: 500px;background-color: red;border: 1px solid red;}
.small{width: 200px;height: 200px;background-color: green;margin: 150px;}

注意
1.如果两个盒子是嵌套关系，那么当给里面的盒子设置了顶部的外边距，外面的盒子也会被顶下来。
2.解决这个问题的方法是给外面那个盒子设置边框属性。
3.解决嵌套关系盒子之间的距离，首先考虑padding，再考虑margin，margin本质上用于控制兄弟关系之间的间隙。
水平居中

.big{width: 500px;height: 500px;background-color: red;}
.small{width: 200px;height: 200px;background-color: green;margin: 0 auto;/*只对水平居中管用，垂直居中用像素*/}

盒子的居中和内容的居中
text-align: center;和margin: 0 auto;的区别
text-align: center;设置盒子里的文字和图片的水平居中
margin: 0 auto;设置盒子自己水平居中
注意
默认清空标签的外边距和内边距

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

在这个网址里直接复制

http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高和字号
在CSS中所有的行都有自己的行高
行高和盒子的高是不同的，行高是指某一行内容的高度，盒子的高度是指标签的高度。
line-height设置行高
规律
1.文字是在行高中垂直居中的。
2.文字在盒子里的垂直居中
1.一行文字：
将盒子的高度设置和行高设置为一样，就可以保证一行文字在盒子的高度中是垂直居中的。
2.多行文字:

.big{margin: 0px;box-sizing: border-box;width: 500px;height: 200px;border: 1px solid #000;padding-top: 20px;padding-top: 80px;/*用padding挤*/}
p{line-height: 20px;}

CSS学习笔记（内边距~文字在盒子里的垂直居中）相关推荐

CSS学习笔记 02、文字属性与继承性
文章目录前言一.文本与字体属性 1.1.文本样式属性 1.2.字体样式(font-xxx) 常用样式使用开源字体(阿里巴巴普惠体) ①线上方式 ②本地方式(建议) 二.继承性 2.1.具有继承性 ...
CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标理解: 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能 ...
CSS学习笔记5CSS的三大特性与盒子模型
CSS的三大特性 CSS有三个非常重要的特性:层叠性.继承性.优先级. 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一种冲突的样式.层叠性主要是解决样式冲突的问题层叠性原则: ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS 学习笔记 - 网格布局（栅格系统）
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式基本概念属性说明容器属性内容属性效果展示 grid-template-rows.grid-template-columns 基本用法 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...

CSS学习笔记（内边距~文字在盒子里的垂直居中）

CSS学习笔记（内边距~文字在盒子里的垂直居中）相关推荐

最新文章

热门文章