css的基本属性和属性值的使用

1. 尺寸相关的属性：

   1. width，宽度，默认撑满一行，自动适应窗口宽度 值：100px，元素的宽度width加边框的左右内边距所以宽度设置100%的时候有边框元素会超出屏幕，此时加属性:box-sizing:border-box ; 就正常了

   2. height，高度，值：100px

   3. border，默认直角边框，可以标记出元素的边界，通过另一个属性border-radius: 8px;来把4个角变成圆弧 给三个值，边框的高度，边框样式，边框颜色 值：border: 3px dotted green;

   4. padding: 边框的内边距，值：15px;可以给1个或多个，1个就是上下左右边距都是该值，多个就分别代表上下左右

   5. margin: 外边距，边框外部跟其他元素的距离 值：30px;跟上面一样可以给多个值，也可以通过属性margin-xx来改变上下左右特定的距离，可以直接margin一起写，也可以xx分开写 padding和margin值也可以写auto，会在页面居中显示

   6. 浏览器有默认边距，如果不想要可以通过*通配符来改变padding和margin设为0

2. 背景处理

   1. background-color：背景颜色

   2. background-image：背景图片，属性url，属性值图片地址，background-image: url(./wukong.jpeg);，和背景颜色不能同时使用，有图颜色就不生效了

   3. box-shadow: 阴影，值：20px 20px 20px gold; 值代表横向偏移，垂直偏移，晕染范围，和颜色

3. 文本处理

.box p{

} 通过空格来选择box选择器内部的其他标签，可以继续加，来控制不同的标签

• color：文本颜色

• text-indent: 2em; 文本首行缩进

• font-size: 50px; 字号大小

• font-family: "黑体"; 字体

• font-weight: 800; 字体粗细，值默认为normal，也就是400

• text-align: center; 居中

• line-height: 80px; 行高，可以通过调整line-height和高度(height)做一个适配实现元素在垂直位置居中

• text-shadow: 2px 2px 2px red; 文字阴影效果

• text-decoration: dashed underline;文本装饰，比如这个值就是在文本下加下划线

• writing-mode: vertical-lr; 竖向显示文本，比如诗词

1. 位置操作

      top:200px;

      left:5px; 默认以最外层body标签为参考，左上角为原点，移动距离

   1. position: absolute; 文本位置，位置，属性值 绝对定位，需要搭配几个属性来使用，继续写

   2. 如果不想以body为标签，想以它的父级小区域为参考来移动位置，那就给他的父级选择器设置一个position: relative; 相对定位，谁设置了这个不会更改元素自身位置，对标签本身没有任何效果，是为了内部标签定位时参考这个标签，再改内部标签的top，left等值就是以这个标签的左上角为原点

   3. position: fixed; 根据当前可视区域来定位，浏览器滑动到哪个位置，他就跟着浏览器滑动的左上角为原点，一直在可视区域内