8.22学习笔记

1. Div

昨天讲的div的样式属性，border margin

padding 内边距

设置padding的时候，这个元素的实际宽高会被拉伸

实际宽高=设置的宽高+padding值（有两个）+borderX2

占用空间=设置的宽高+2Xmargin+2Xpadding+borderX2

padding设置完之后，会无形拉大盒子。怎样解决这种效果：

box-sizing 保证了div的宽高永远是设定的值，加了padding只会去挤空间。

background 背景

background:red; 带颜色的背景

简写

大小需要单独列出来。

2.定位 position

      相对定位 position:relative; 这个属性给需要的父级。

      绝对定位 position:absolute; 它有四个值 top left right bottom;

position的使用是将该标签的类型给变了，将块级元素变成了行级块元素。

position:relative; 指定参照物 相对定位 给父级

position:absolute;    绝对定位

  页面结构分析

结构层

     最外面的一层，这个结构不能设置太多的样式，一般设置宽，margin。

     千万不要设置position，会让内部元素脱离文档。

布局层

    给予内部元素进行排版。

position造成的脱离文档流该如何解决？

     最简单的就是给父级一个高。

    今天尝试着写了一下三国杀部分人物，要有思路有逻辑去写，过后要自己去熟悉标签的写法，要记。

   如图

8.22学习笔记

原文：https://www.cnblogs.com/xieyankeai/p/9519850.html