简单html以及css的用法详解

2020-04-17 20:34:05易采站长站整理

.al {   
    text-align: left;   
}   
  
.ac {   
    text-align: center;   
}   
  
.ar {   
    text-align: right;   
}   
  
.hide {   
    display: none;   
}  

这样可以方便开发人员对各个标签的样式的初始化以及公共类的重用。

4、分析网站结构

做网站的时候也有一个规范或是通例 

布局的顺序一般是从上到下,从左到右

在写页面的时候,一般考虑使用标准流的元素,其次才使用浮动或是定位。

就在标准流元素当中,宽高是最稳定的,其实才使用padding,最后或者可以使用margin.

我们网站结构中的任何标签 都可以看成是一个盒模型,都可以设置宽高,只是有的元素设置了宽高之后,不起作用。

要想让行内元素的宽高起作用:

1. 将行内元素转换成块级元素或是行内块元素

2. 浮动   脱标  

3. 定位   脱标

在布局行内块元素时,行内块元素之间有默认的几像素的间距。这几像素的间距只能用浮动来清除。

定位有四种:

Fixed    absolute    relative   static

一般我们在分析网站结构时,使用火狐浏览器可以将这个网页截图之后保存下来:

然后我们可以使用fireworks来提取网站中的具体内容的宽高、颜色等。

Fw的常用快捷键:

I      滴管工具   吸取颜色

K     切片工具    量取元素的宽度

Z   放大镜工具  

V     移动

A     指针工具

常用的复合属性:

Background

mso-char-indent-count:3.4900;">浮动的原因就是因为父盒子没有高度,原来的高度是靠标准流中的子元素撑起来,但是子元素浮动了之后 ,脱离标准流了,造成父级元素的高度为0;

1.给父盒子设置一个高度

2.Clear: both

3.Overflow: hidden   触发了BFC模式 也可以用来清除浮动

4.伪元素或是双伪元素清除法

XML/HTML Code复制内容到剪贴板

.clearfix:before, .clearfix:after {   
    /*清除浮动,最好最标准的写法*/   
    content: "";   
    display: table;   
}