如何设计网站样式，CSS网站布局的思想

网站的布局就是两部门（横标的目的和纵标的目的） 若是是纵标的目的的就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离 padding ,边框往外的部门margin border调这些属性就可以。

东西/原料

• 笔记本电脑或者台式机电脑
• 电脑上要装前端编纂器

方式/步调

1. 1

   一、行内元素和块元素。行内元素：输入完标签之后，不是本身占一行,行内元素的宽度和高度是由内容来决议，宽度和高度width height 不克不及用  css样式是display:inline;块元素 ：输入完标签之后，本身独有一行,可以设置宽度和高度，width和 height，Css样式 display :block。

   
2. 2

   二、Overflow当内容溢出，若何显示；Hidden：埋没；Auto;若是盒子装不下，就会呈现滚动条；Scroll,无论是否能装下都有滚动条边框。

   
3. 3

   三、外层元素的样式，会被里面的元素所担当，那些标签可以担当？如下：

   
4. 4

   四、优先级。单个选择器的优先级：标签选择器  <类选择器 < id选择器 <行内样式表。

   
5. 5

   五、复合选择器优先级：写的越切确，优先级越高。

   
6. 6

   六、断根浮动。Div里面还有<div >(外面的div父盒子>)div父盒子没有设置固心猿意马高，里面设置了浮动，父元素受影响，无法正常的计较，若何让父元素获得一个天然高，在父盒子里面的最下方加<div>给该div设置断根浮动的属性clear:both。

   
7. 7

   七、Fixed 固心猿意马定位。相对于浏览器窗口来进行的定位；若是不设置定位坐标，就在本来的位置；层级要被通俗标签高；若是连系定位坐标，就是相对于方针位置的距离；设置固心猿意马定位之后，必然是块元素。

   
8. 8

   八、Relative相对定位。相对定位占空间；若是不连系定位坐标，就是在本来的位置；若是连系定位坐标，相对【自身】，作为参考点；层级要高于通俗的元素。

   
9. 9

   九、绝对定位。

   
10. 10

    十、让我们本身脱手来做一下吧！！

注重事项

• 本身有的属性，不标的目的外担当，不会担当祖先元素的属性
• 盒子里面所有的值加到一路必然不克不及年夜于父盒子的内容区的宽度width 总的宽度=内容区的宽度width+border(摆布)+padding（摆布）+margin(摆布)