杂记

5.30Web笔记

1.盒子的边框（border）:可以设置边框的颜色、粗细、样式 P132

块元素：div 、p、ul

2.solid:实线

dotted:点线

dashed:虚线

double:双线

3. 3. text-align: center;    /*文字、图片全部水平居中*/
   
   4. line-height: 100px;   /*行高、文字自动垂直居中*/
   
   5. margin: 0 auto;   /*有两个值代表上下、左右，其中0：上下边距为0; auto:左右外边距自动均分，实现局中*/
   

4. text-decoration:来设置文本修饰 P106

5. （1）text-decoration:  underline /*设置文本下划线*/
   （2）text-decoration:  overline /*设置文本上划线*/
   （3）text-decoration:  line-through/*设置文本删除线*/
   （4）text-decoration:  none /*默认值，定义的标准文本*/
   

（1）display: flex; /给父元素设置该属性，开启弹性布局，控制子集元素，横向排布/
（2）display:block /块状元素默认值，自带换行符/
（3）display:inline-block /行内块状元素，既有行内元素特性，也有块状元素特性（可以设置长宽高，但不能自动换行）/
（4）display:inline /行内元素默认值/
（5）display:none /设置元素不会被显示/

9.**文本样式属性**

   (1)font-style:  设置字体的风格

   (1)font-weight:  设置字体的粗细

   (1)font-size:       设置字体的大小

   (1)font-family:    设置字体的类型

   (1)font:   在一个声明中设置所有字体的属性，必须按照顺序来（font-style-->font-->weight-->font-size-->font-family）



10**.文本样式**

```css
(1)color:设置文本颜色
  (2)text-align: center; 文字、图片全部水平居中
(3)line-height: 100px; 行高、文字自动垂直居中
  (4)text-decoration:来设置文本修饰    
(5)text-indent:定义文本首行缩进方式
  (6)text-overflow: ellipsis;溢出部分显示省略号

11.float浮动：实现横向并排

    left:元素向左浮动，依次靠左排布
 right：元素向右浮动，依次靠右排布
    none：不浮动

12.列表样式

(1)使用较多的是list-style-type和list-style(设置列表无标记符)

13.< img src="C:\Users\lenovo\Pictures\初始化计算器_2.jpg" alt="初始化计算器_2" style="zoom: 33%;" />

​

14.overflow属性：防止父级塌陷，并且会修剪溢出盒子之外的内容且隐藏内容

   (1) overflow:visible 默认值，内容不会被剪切呈现盒子之外

   (2)overflow: hidden内容会被剪切，其余内容是不可见的

   (3)overflow : scroll 内容会被剪切，但可以在浏览器中用滚动条来查看其余内容

   (4)overflow: auto 如果内容会被剪切，则在浏览器中用滚动条来查看其余内容

   white-space: nowrap;/*不折行*/
overflow:hidden ;/*超出省略部分隐藏*/
   text-overflow: ellipsis;/*用省略号显示*/

16.定位P175

(1)position:relative 相对定位 元素以自身原来的位置为参照物，移动后原来占据的空间会被保留，常用来作为绝对定位元素的父级参照物

(2)position:absolute 绝对定位 以父级为参照物，原来的位置会被占据

(3)position:fixed 固定定位

常用top/bottom/left/right控制相对于参照物的位置