前端课堂（三）
css的基本样式
font-size: 设置元素的字体大小
单位：px，像素
text-align：设置文本在元素内水平方向的位置
值：center：水平居中
left / start：水平居左
right / end：水平居右
font-weight：设置字体加粗
值： normal：默认值，定义标准字体
bold：定义加粗文本
bolder：特粗体，相当于strong和b的作用
lighter：定义细体文本
100-900：定义字符的粗细，400相等于默认值normal，700等同与粗体文本
text-decoration：文本装饰
值：none：去除文本装饰，比如a标签的下划线
line-through: 添加删除线
underline：添加下划线
overline：添加顶部线
text-indent: 设置段落首行缩进距离
单位：em：相当于当前元素的字体大小
font-family: 设置字体类型，字体家族
font-style: 设置元素字体风格
值：normal：默认值，标准的字体样式
italic：定义斜体文本
inherit：规定当前元素继承父元素的字体样式
oblique：文本为倾斜的状态
width : 宽度
单位：px，像素
百分比：%，占父元素宽度的百分之多少
注意：当元素没有设置宽度时，块元素宽度时父元素的100%，行内元素宽度靠文本内容撑开
height : 高度
单位：px，像素
百分比：%，占父元素宽度的百分之多少（要父元素在有固定高度的情况下使用）
注意：单元素没有设置宽度时，靠内容撑出高度，内容是浮动元素/绝对定位/固定定位除外
background-color : 设置元素的背景颜色
line-height: 设置行高，行间距
作用：让文本在行间距内垂直居中，不允许使用负值
值：numal：设置合理的行间距
numder：设置数字，此数字会与字体大小相乘来设置行间距
百分比：相当于当前文字大小的百分比进行行间距
letter-spacing : 字间距，设置字符与字符之间的间距
text-transform : 字体转换
值：uppercase：大写英文
lowercase：小写英文
capitalize：单词首字母大写
参考代码（自由复制）
css的基本样式
css文本样式
百度一下 所幸皆为美好，所行不负年少。
你的生活中，有清晨灿烂的朝阳，傍晚辉煌的暮光，有真心待你的好友，有爱你至深的亲人，有第一场雪时吃的一碗麻辣烫，也有捂在掌心温热的奶茶。你看，这些都是生活赋予你的，简简单单又实实在在的美好
走到生命的哪一个阶段，都该喜欢那一段时光，完成那一阶段该完成的职责，顺生而行，不沉迷过去，不狂热地期待着未来，生命这样就好。不管正经历着怎样的挣扎与挑战，或许我们都只有一个选择：虽然痛苦，却依然要快乐，并相信未来想开一间杂货铺第一行
第二行
want you to be happy. But I want to be the reason.
盒子模型
1 . 什么是盒子模型
盒子模型（Box Model）就是把html元素本身看作是一个矩形盒子，每个矩形都是由内容（content），内边距（padding），边框（border），外边距（margin）组成，每个盒子除了有自己的大小之外，还会影响其他盒子的位置
2 . 盒子的特性：
每个盒子都有四部分组成：内容（content），内边距（padding），边框（border），外边距（margin）
每个属性都包括四部分：上，下，左，右
3 . 标准盒子和怪异盒子模型的表现效果的区别：
（ 1. 标准盒子中的width值的是内容区域（content）的宽度，高值的也是内容区域（content）的高度
标准盒子模型的大小=content+padding+border+margin
（ 2. 怪异盒子模型中width指的内容content+内边距padding+边框border
怪异盒子模型的大小=width（content+padding+border）+margin
元素盒子模型
box-sizing: 盒子模型尺寸的计算；
content-box：默认值，按照标准盒子进行计算。
border-box：计算宽高时按照IE盒模型进行计算。
参考代码（自由复制）
元素盒模型
内边距和外边距
1. padding：内边距
作用：能撑大盒子，调整元素内容的位置。
距离：从元素的边框(border)开始到内部的内容(content)之间的距离。
语法结构：
一、属性为padding，通过值控制不同边的内边距。
1.一个值：同时设置四个边的内边距；
2.两个值：分别表示上下、左右内边距；
3.三个值：分别表示上，左右，下内边距；
4.四个值：分别表示上右下左内边距。
二、通过属性 padding-方向 控制四个边的内边距，设置单方向内边距。
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
2. margin：外边距
作用：元素添加外边距后会移动元素的位置，调整元素与元素之间的距离。
距离：从自身的边框开始，到另一个元素边框之间的距离。
语法结构：
一、属性为margin，通过值控制不同边的外边距。
1.一个值：同时设置四个边的外边距；
2.两个值：分别表示上下、左右外边距；
3.三个值：分别表示上，左右，下外边距；
4.四个值：分别表示上右下左外边距。
二、通过属性 margin-方向 控制四个边的外边距，设置单方向外边距。
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
参考代码（自由复制）
内边距和外边距
123第一块第二块
颜色的取值
1 . 使用颜色名（不建议大规模使用，避免有些颜色浏览器不被解析，不同浏览器对颜色的解析有差异）
2 . 使用百分比：
rgb：三种颜色
三个值为最大值表示白色
三个值为最小值表示黑色
三个值相等显示灰色
3 . 使用数值 ：
取值范围：0~255
4 . 十六进制 ：最常用的方法
5 . rgba : 最后一个值控制颜色的透明度
a的取值范围：0-1，0为完全透视，1为完全不透视
参考代码（自由复制）
颜色的取值
颜色名百分比数值十进制色盘
元素转换
1 . display : 改变元素的布局方式。
值：
block：将元素转换为块元素。
inline：将元素转换为行元素。
inline-block：将元素转换为行内块元素。
none：隐藏一个元素，隐藏后不会显示。
2 . html标签按照布局方式可分为：
块元素，行元素，行内块元素。
3 . 块元素特点：
1.独占一行；
2.可以设置宽高，
如果不设置宽高，则显示默认宽高，如果也没有默认宽高，这显示为内容的宽高。
3.布局方式默认为块元素：p，h1-h6等。
4 . 行元素特点：
1.不独占一行；
2.不能设置宽高；宽高取决于自身的内容；
多个行元素之间会左右排列；
一行到最后显示不下时会自动换行。
3.布局方式默认为行元素：b，a等。
5.行内块元素特点：
1.不独占一行；
2.可以设置宽高；
3.多个行内块元素之间会左右排列；
4.一行到最后显示不下时会自动换行。
5.布局方式默认为行内块：img，input等。
参考代码（自由复制）
元素转换
qwerqwer多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列多个行元素之间会左右排列水平居中
显示为块元素显示为块元素山东人富商大贾
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！