web前端html+css

 

1.利用伪元素清除浮动方法

清除浮动的样式，放在外层div的最后，:after上就可以了。

例：   

 .wrapper::after{

       content:"";

       clear:both;   //如果想clear生效，必须是块级元素；

       display:block;

}

2.溢出容器，要打点展示

    2.1 单行文本，三件套

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

   2.2 多行文本

overflow:hidden;
line-height: height的一半

3.浏览器内核问题

现主流浏览器                    对应的内核

IE                             trident
Firefox                        Gecko
Google chrome                  Webkit/blink
Safari                         Webkit
Opera                          presto

 4.charset 编码字符集

gb2312           只有简体

gbk              扩展字符集，有繁体中文

utf-8            所有

5.form输入框，选择框

<form action="" method="GET">
    //输入框内容
    <p>username:<input type="text" name="username"></p>
    //输入用户名，类型为text文本，namu为输入框名字
    <p>password:<input type="password" name="password"></p>
    //输入用户名，类型为password密码文本，namu为输入框名字

    选择框内容
    
    语文<input type="radio" name="radio1">
    数学<input type="radio" name="radio1">
    英语<input type="radio" name="radio1">
    //类型为radio单选框，name一致就可以把它们串联起来；

    提交按钮

    <input type="submit">
    //可以在地址栏查看提交内容


</form>

6.css的3种引用

1> 行间样式                  行间内插入style属性

2>页面级css                  body内创建一个style标签

3>外部css文件                head内<meta>下面<link>一个文件

7.css选择器

1.ID选择器            #            一一对应
2.class选择器         .            多对多
3.标签选择器          标签名        所有名字相同的
4.通配符选择器        *            全局

8.css 权重

256进制

!important                   Infinity
行间样式                      1000
ID                           100
class|属性|伪类               10
标签|伪元素                   1
通配符                        0

9.伪类（浏览器查找是 自右向左的）

1.父子选择器                div span{};
2.直接子元素选择器           div > span{};
3.并列选择器                div.class{}同时用多个条件
4.分组选择器                div,strong,span{}

10.元素的分类

1.行级元素

内容决定元素所占位置，不可以通过css改变宽高

例：span    strong    em    a    del

2.块级元素

独占一行，可以通过css改变宽高

div    p    ul    li    ol    form    address

3.行级块元素

内容决定大小，可以改变宽高

img

11.position属性

position有3种属性


absolute: 绝对定位

层模型，相对于最近的有定位的父级定位，如果没有，那么相对于文档定位。

relative: 相对定位

保留原来位置进行定位    相对于原来位子定位

fixed: 固定定位

固定在屏幕上的位置

12.居中写法

div{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50px;    //减去一半
    margin-top:-50px;     //减去一半
}