文字
## 行高
line-height:normal; //默认。设置合理的行间距
//number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距
//length 设置固定的行间距
// % 基于当前字体尺寸的百分比行间距
//inherit 规定应该从父元素继承 line-height 属性的值
## 文本对齐
text-align: center; //把文本排列到中间
//left 把文本排列到左边。默认值：由浏览器决定。
//right 把文本排列到右边。
//justify 实现两端对齐文本效果。
//inherit 规定应该从父元素继承 text-align 属性的值。
列表
## list-style-type
该属性设置列表项标记的类型 ，取值有none（无标记）、
disc（实心圆，默认值）、
circle（空心圆）等.
decimal-leading-zero表示0开头的数字标记
## list-style-position
该属性设置在何处放置列表项标记,默认为outside（保持标记位于文本的左侧），还有inside（放置在文本以内，且环绕文本根据标记对齐）和inherit（从父元素继承 list-style-position 属性的值）
## list-style-image
该属性使用图像来替换列表项的标记
(如果type和image同时出现，（图片存在的话）则把图片展示出来)
## list-style
取值有lower-roman:小写罗马数字、upper-roman:大写罗马数字等
列表图片
在head中引入
<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
//href规定被链接文档的位置 rel="stylesheet"表示文档的外部样式表
## padding
内边距
## margin
外边距
字体库
定义引用的网络字体
开发中应放在类似font.css的单独文件中
@font-face{
font-family: myfont; /*myfont这里为用户自定义名称*/
src: url(''),url('');
}
html{
font-family: "webfont";
}
深入学习: https://www.w3school.com.cn/cssref/pr_font-face_rule.asp
元素隐藏的几种方式
display:none;
<head>
<style>
body>p:nth-child(2){
//该属性规定元素应该生成的框的类型
display: none;
//none值会让此元素不会被显示，不占据屏幕位置
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8<img src="../图片文件/验证码.png"></p>
<p>9</p>
</body>
网页效果：
（2就没被显示出来，并且没有影响其它元素的位置）
visibility: hidden;
body>p:nth-child(4){
//visibility属性规定元素是否可见
visibility: hidden;
//元素是不可见的，占据屏幕位置
}
网页效果：
（4的位置就是空白占据空间的）
opacity: 0;
body>p:nth-child(6){
//opacity属性设置元素的不透明级别
opacity: 0;
//其value值规定不透明度，从 0（完全透明）到 1（完全不透明），占据屏幕空间，值为0时不让其显示，也可修改值改变透明度
}
网页效果：
overflow: scroll;
body>p:nth-child(8){
background-color: aqua;
height: 32px;
//overflow属性规定当内容溢出元素框时发生的事情
overflow: scroll;
//内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
}
网页效果：
overflow: hidden;
body>p:nth-child(8){
background-color: aqua;
height: 32px;
overflow: hidden;
//内容会被修剪，并且其余内容是不可见的。对子元素进行要求，超出父元素范围，将会隐藏
}
网页效果：
overflow: auto;
body>p:nth-child(8){
background-color: aqua;
height: 32px;
overflow: auto;
//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
}
网页效果：
display
line
body>p{
display: inline;
//行内元素
height: 100px;
//设置的值也不可改变它
}
<body>
<p>段落1</p>
<p>默认段落</p>
<p>段落2</p>
<span>无意义的行内元素</span><span>共享在一行中</span><span>是没有效果的</span>
<ul>
<li>我的
<div>
<ol>二级菜单</ol>
</div>
</li>
<li>退出</li>
<li>首页</li>
</ul>
</body>
网页效果：
未使用属性：
使用属性后：
（此元素会被显示为内联元素，元素前后没有换行符）
block
body>span:nth-child(2){
display: block;
//此元素将显示为块级元素，此元素前后会带有换行符
height: 100px;
}
对该属性认识还不太深刻
ul li{
display: inline-block;
//行内块级元素：可以共享空间、同时可以指定宽高、可以包含块级元素
}
网页效果：
未使用属性：
使用属性后：
inline-block
<div class="two">
第二个
</div>
<div class="three">
第三个
</div>
.three{
display: inline-block;
/* 行内块级元素：可以共享空间、同时可以指定宽高、可以包含块级元素 */
background-color: pink;
width: 100px;
height: 100px;
}
.two{
display: inline;
/* 行内元素 */
background-color: pink;
width: 100px;
height: 100px;
/* 设置的值也不可改变它 */
}
网页效果：
1566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
