border-radius设置圆角 radius（半径）

圆角分为左上、右上、左下、右下，代码如下：

div{border-radius:20px 10px 15px 30px;}

值的顺序依次为左上 右上 左下 右下

如若四个圆角值相同：

div{border-radius:10px;}

如若左上角和右下角同一值10px，右上角和左下角同一值20px(对角值相同，左上值数据在前）：

div{bordor-radius:10px 20px;}

注意：一个正方形设置的圆角效果值为元素宽度一半时，显示效果为圆形。如：

div{

width:200px;

height:200px;

border:5px solid red;

border-radius:100px;}

单独设置下边框：border-bottom

如：

p{border-bottom:1px solid red;}

同样也可以单独设置其他三边上、左、右

上边框（顶部边框）：border-top

下边框（底部边框）：border-bottom

左边框：border-lef

右边框：border-right

border添加边框

1. border-style（边框样式）常见的有：dashed（虚线）、dotted（点线）、solid（实线）

2. border-color（边框颜色）可设置为十六进制颜色，如：border-color:#fff000;

3. border-width(边框宽度）常用的设置是像素px

   如：

   p{border:2px solid red;}

背景色

网页中的标签五十是行内元素还是块状元素都可以设置一个背景色。

background-color：颜色值

css的宽度和高度

css内定义的宽（width）和高（height）指的是填充以里的内容范围。

元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

元素实际高度（盒子的高度）=上边界+上边框+上填充+内容高度+下填充+下边框+下边界

填充：podding

边框：border

边界：margin

如css代码：

div{

width:200px;

padding:20px;

border:1px solid red;

margin:10px;

}

none不占据位置

none设置此元素不显示，当想要元素隐藏时可以使用此值。

display:none;

内联块状元素（inline-block）

内联块状标签：<img>、<input>

特点：

1. 和其他元素都在一行；

2. 元素的高度、宽度、行高以及顶部、底部边距都可设置。
   

内联元素

在html中<span><a><label><strong><em>就是内联元素（行内元素）inline元素。

特点：

1. 和其他元素都在一行

2. 元素的高度、宽度、顶部和底部边距不可设置。

3. 元素的宽度就是它包含的文字或者图片宽度，不可改变。

   
   

块级元素

概念：在html中<div>、<p>、<h1>、<from>、<ul>、<li>就是块级元素。

特点：

1. 每个块级元素都从新的一行开始，并且气候元素也另起一行。（一个块级元素独占一行）
   

2. 元素的高度、宽度、行高以及顶和底边距都可设置。

3. 元素宽度在不设置的情况下，是他本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
   

元素分类

在css中html中的标签元素大体分为三种类型：块状元素、内联元素（又叫行内元素）、内联块状元素。

块状元素常用的有：

<div>、<p> 、<h1>...<h6> 、<ol>、 <ul> 、<dl> 、<table> 、<address> <blockquote>、 <from>

内联元素/行内元素常用的有：

<a> 、<span>、<br>、 <i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

内联块状元素常用的有：

<img>、<input>

长度值

常用的长度单位：px（像素）、em、%百分比，这三种单位都是相对单位。

1. 像素

   像素指的是显示器上的小点（css规范中假设“90像素=1英寸”），目前大多数设计者都倾向于使用像素px作为单位。

2. em

   就是本元素给定字体的font-size值，如果元素font-size为14px，那么1em=14px。首行缩进，英文字母、单词间距中直接使用。

   若干font-size单位设置为em，计算的标准以p的父元素的font-size为基础

   如：p{font-size:14px;} span{font-size:0.8em;}

3. 百分比：设置行高（行间距）

   p{font-size:12px;line-height:130%}

   也可以设置font-size，但跟em使用时一样

   
   

text-align设置文本对齐

text-align:center;居中

text-align:left;左对齐

text-align:right;右对齐

letter/word-spacing增加或减少字符空白

中文字间隔、字母间距设置：

1. 字母与字母之间的间距设置：

   h1{letter-spacing:50px;}

2. 单词间的间距设置：

   h1{word-spacing:50px;}

   
   

line-height设置行间距（行高）

p{line-height:1.5em;}

text-indent首行缩进：（indent缩进）

如：

p{text-indent:2em;}

一般放在head的style中

注意：2em的意思是文字的两倍大小

使用text-decoration添加文本修饰：decoration（修饰）

技术点的解释：

1、text-decoration可以设置添加到文本的修饰。

2、text-decoration默认值为none, 定义标准的文本。

3、text-decoration的值为underline，装饰线在文本底部。

4、text-decoration的值为overline，装饰线在文本顶部。

5、text-decoration的值为line-through，装饰线穿过文本，一般用于商品折扣价。