前端基础知识总结

1.css页面引入方法:

       1.外联式<link rel="stylesheet" type="text/css" href="css/main.css">

       2.嵌入式<style type="text/css">

       3.内联式<div style=".....">

2.css文本设置:

       font:nomal 12px/36px '微软雅黑'  悬空的字

       line-height:24px  设置文字的行高

       text-decoration:none;设置下划线

       text-indent:首行缩进

       text-align:水平对齐方式

3.css选择器:

       1.标签选择器

       2.id选择器:不可以重复[#box{color:red}   <div id=”box”>]

       3.类选择器

       4.层级选择器

       5.组选择器:就是类选择器的交集部分

       6.伪类及伪元素选择器

        变换效果:.box1:hover{color:red}

        插入内容:.box2:before{content:'行首文字';}

                 .box3:after{content:'行尾文字';}

4.css盒子模型

       1.设置边框:

              border-top:10px solid red;  大小,线,颜色

border-style:solid实线       dashed虚线         dotted点线

   2.设置边内边距:

              Padding:顺时针

**难点**

1.margi:x auto 水平居中

2.margin负值让元素位移及边框合并

3.外边距合并:两个外边距压在一起,只会形成较大的一个边距

       a.只设置margin-top

       b.设置元素为浮动或者定位

4.margin-top塌陷

1.给父盒子添加border

2.给父盒子添加padding-top

3.给父盒子添加overflow:hidden 元素溢出的时候,怎么做的属性

4.父盒子:position:fixed

5.父盒子:display:table

6.给子元素的前面添加一个兄弟元素

            属性为:content:"";

            overflow:hidden;

5.块元素:div,p,ul,li,h,di,dd,dt

       1.支持全部的样式

       2.没有设置宽度时,默认的宽度为父级宽度100%

       3.盒子占据一行,即使设置了宽度

内联元素:支持所有的样式,盒子并在一行,换行盒子会产生间距[父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素垂直对齐方式]

不支持宽高,margin,padding上下(完全由内容决定)

代码换行,盒子之间会产生间距

  1. 父级font-size=0,内联元素再自身设置font-size
  2. margin-right设置为负值
  3. float:left;

父元素可以用text-align设置水平对齐方式,line-height属性值设置垂直对齐方式

display属性:用来设置元素的类型及隐藏的,常用的属性有:none,block,inline,inline-block

文字绕图:浮动的块虽然脱离了正常的文档流,但是依然占据正常文档流的文本空间

Question:浏览器默认解析英文或者数字时,是按照单词进行解析

Solution:如果设置word-wrap : break-word;  这个单词就会进行换行显示

6,浮动:

  1. 碰到父元素边界,浮动元素,未浮动的元素才停下来
  2. 浮动让行内元素或块元素自动转换成为行内块元素
  3. 浮动元素会占据该位置
  4. 父元素内整体浮动的元素无法撑开父元素,需要清除浮动
  5. 浮动元素之间没有垂直margin的合并

清除浮动

    父级上增加属性overflow:hidden

    使用成熟的清浮动样式类,clearfix

    .clearfix:after,.clearfix:before{ content: "";display: table;}

    .clearfix:after{ clear:both;}

    .clearfix{zoom:1;}

    清除浮动的使用方法:

    .con2{... overflow:hidden}

    或者

    <div class="con2 clearfix">

7.定位:

       position:relative    absolution     fixed悬浮      static等于没有设置属性     inherit继承父类的属性

8.块元素:独占一行,不能并列显示,能够设置宽高(宽度为父盒子的100%)

行内元素:默认并排显示,不能设置宽高,宽度为内容的宽度

position:absolute;一般设置父盒子为relative,这样子盒子会以父盒子作为参考

absolute,fixed分离出了标准流

绝对定位和固定定位的块元素和行内元素会自动转换为行内元素

9.background属性

color背景颜色     image背景图片地址   repeat如何重复平铺  

position背景图片的位置    attachment背景图片是固定的还是随着页面滚动条滚动

background:cyan url(bg.jpg) repeat-y   颜色—图片—重复方式

posted @ 2018-03-12 20:21  tonyey  阅读(231)  评论(0编辑  收藏  举报