CSS样式
控制高度和宽度
width宽度
height高度
块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定.
示例:
诗
div标签
span标签
字体属性
字体
font-family: '楷体','黑体'; /* 字体,从左往右找浏览器能够支持的字体 */
字体大小
font-size: 10px; /* 设置字体大小,默认字体大小是16px */
字重
font-weight:bold; /*加粗*/
字体颜色
/*color:red;*/
/*color: #668B8B; */
/*color: rgb(255, 170, 205);*/字重设置的值: font-weight用来设置字体的字重（粗细）。
| 值 | 描述 |
|---|---|
| normal | 默认值，标准粗细 |
| bold | 粗体 |
| bolder | 更粗 |
| lighter | 更细 |
| 100~900 | 设置具体粗细，400等同于normal，而700等同于bold |
| inherit | 继承父元素字体的粗细值 |
以上示例
诗
少壮不努力
老大徒伤悲
文字属性
文字对齐(水平方向对齐:text-align)
text-align 属性规定元素中的文本的水平对齐方式。（letter-spacing）
| 值 | 描述 |
|---|---|
| left | 左边对齐 默认值 |
| right | 右对齐 |
| center | 居中对齐 |
text-align: center;
text-align: right;
text-align: left;文字垂直对齐
line-height:和css的height相同则会居中以上示例:
诗
努力
文字装饰
text-decoration 属性用来给文字添加特殊效果。
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。 |
| underline | 定义文本下的一条线。 |
| overline | 定义文本上的一条线。 |
| line-through | 定义穿过文本下的一条线。 |
| inherit | 继承父元素的text-decoration属性的值。 |
百度
示例
a{
text-decoration: none;
}首行缩进
text-indent文字缩进
诗
黄色的树林里分出两条路，
可惜我不能同时去涉足，
我在那路口久久伫立，
我向着一条路极目望去，
直到它消失在丛林深处。
但我选了另外一条路，
它荒草萋萋，十分幽寂，
显得更诱人，更美丽；
虽然在这条小路上，
很少留下旅人的足迹。
那天清晨落叶满地，
两条路都未经脚印污染。
啊，留下一条路等改日再见！
但我知道路径延绵无尽头，
恐怕我难以再回返。
也许多少年后在某个地方，
我将轻声叹息将往事回顾：
一片树林里分出两条路——
而我选择了人迹更少的一条，
从此决定了我一生的道路。
背景属性
/*background-color: antiquewhite;*/ /* 设置背景颜色 */
/*background-image: url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg);*/ /* 背景图片,url属性值为图片路径 */
/*background-repeat: no-repeat;*/ /* 图片是否平铺,默认是平铺的,占满整个标签 */
/*background-position: 500px 310px;*/ /*图片位置*/
background: antiquewhite url(https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2735289349,1811425433&fm=26&gp=0.jpg) no-repeat 500px 310px; 这一句是上面四行的缩写缩写格式
background: yellow url("meinv.jpg") no-repeat 100px 50px;
背景颜色 背景图片路径 是否平铺 图片位置边框属性
/*border-style: dotted;*/ 样式
/*border-color: red;*/ 颜色
/*border-width: 10px;*/ 宽度
简写形式:
/*border: 10px solid yellow;*/
四个边框可以单独设置:
border-left:10px solid yellow ;
border-right:10px dashed red ;
设置圆角
border-radius: 5%; /* 设置圆角 *边框样式的值
| 值 | 描述 |
|---|---|
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
示例:
诗
display
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
示例:
诗
少壮不努力
老大徒伤悲
隐藏标签:
/*display: none;*/ /* 隐藏标签,不占原来的位置 */
visibility: hidden; /* 原来的位置还占着 */盒子模型
content:内容 width和height 是内容的高度宽度
padding:内边距(内填充) 内容和边框之间的距离
border:边框
margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离
占用空间大小:content+padding+border示例:
诗
少壮不努力
老大徒伤悲
努力
四个方向单独设置padding
padding-left: 10px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;四个方向单独设置margin
margin-top: 10px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 200px;float浮动
一般用来进行页面布局
浮动会脱离正常文档流
会造成父级标签塌陷问题解决浮动问题
clear属性规定元素的哪一侧不允许其他浮动元素。
| 值 | 描述 |
|---|---|
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。 |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |
clear: both; /* clear清除浮动*/ left/right
方式:
1. 父级标签设置高度
2. 通过伪元素选择器来进行清除浮动
.clearfix:after{
content:'';
display: block;
clear: both;
}解决示例:
诗
少壮不努力
老大徒伤悲
努力
overflow溢出
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
示例:
诗
黄色的树林里分出两条路，
可惜我不能同时去涉足，
我在那路口久久伫立，
我向着一条路极目望去，
直到它消失在丛林深处。
但我选了另外一条路，
它荒草萋萋，十分幽寂，
显得更诱人，更美丽；
虽然在这条小路上，
很少留下旅人的足迹。
那天清晨落叶满地，
两条路都未经脚印污染。
啊，留下一条路等改日再见！
但我知道路径延绵无尽头，
恐怕我难以再回返。
也许多少年后在某个地方，
我将轻声叹息将往事回顾：
一片树林里分出两条路——
而我选择了人迹更少的一条，
从此决定了我一生的道路。
overflow与border-radius的应用:圆形头像
小诗
定位
static定位(默认,无定位)
相对定位
position: relative; /* 相对于自己原来的位置进行移动,原来的空间还占着*/
绝对定位
position:absolute; /* 不占用自己原来的位置,移动的时候如果父级标签或祖先标签设置了相对定位,会以父级标签或祖先标签为参照物移动,如果父级标签或祖先标签没有设置相对定位,则按照整个文档进行移动*/
固定定位
position:fixed;
按照浏览器窗口的位置进行移动回到顶部示例:
小诗
这是顶部位置
z-index设置层级
以模态对话框来介绍
小诗
努力
少壮不努力,老大徒伤悲
z-index注意点
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用opacity透明度和rgba透明度的区别
opactiy是整个标签的透明度
rgba是单独给某个属性设置透明度示例:
小诗
div1
div2