CSS基础笔记

注：本文为初学css时的笔记，未详细检查，仅作为本人学习记录查阅，内容可能有瑕疵。

css四种引入方式

行内样式，嵌入式样式style，引入样式link，导入样式@importurl("")

选择器

标签选择器，id选择器，类选择器，交叉选择器p.hd(中间没有空格），子代选择器#box p（有空格），群组选择器逗号，通用选择器*

hover几乎可以用于所有标签

css继承性

继承的是父级元素文字相关样式

叠加性

指不同选择器给同一元素加的不同样式能同时生效

优先级

继承的样式<浏览器默认的样式<通用选择器<标签选择器<class选择器<id选择器<子代选择器<行内样式。

选择的越精准,优先级越高（因此写样式的时候，尽量写的精准）

行级元素，块级元素

块：能设置宽高，不与其他元素待在同一行，常见的div p ul li h1-h6

行:不能设置宽高,与其他元素在一行，常见的aspan strong em u

行内块级元素:能设置宽高,能与其他待在一行，常见imginput

控制文字样式

font-family默认宋体或微软雅黑

font-size浏览器默认16px,2em是32px(一般使用px)

text-align水平位置

line-height默认行高与文字高度相同,上下没有间距.文字在它所在行高范围内是垂直居中的(让文字垂直方向居中)

text-indent：2em

font-weight取值没有单位,表示粗细程度(取值范围100-900).最常用的正常400,加粗700.

font-style:italic

text-decoration:underline.overline,line-through

letter-spacing字符间距

盒子模型

width

margin,paddng

左右外边距累加，上下外边距合并（取最大值）

行级元素只能设置左右外边距，不能设置上下外边距

元素的转换与隐藏

display:block

display:none

overflow属性

overflow:hidden

        auto自适应滚动条

        scroll有滚动条

边框属性

border：1px solid red;

border-weidth

border-color

border-style

border-right

border-right-color

浮动

可以改变普通文档流的排列方式，可以使得元素在同一行中排列，使我们的布局更加的方便。一个正常元素排列时会忽略前面的浮动元素，浮动元素部分脱离文档流（此特性可以设置文字环绕效果）

如果子元素是浮动的，会导致撑不开父元素。解决办法：给父级元素加一个overflow:hidden

绝对定位与相对定位

position:absolute;绝对定位是元素完全脱离文档流，页面中的其他元素视他不存在，也就是说绝对定位元素不会影响到其他元素

position:relative;相对定位是参照元素原来的位置进行移动，元素原有的空间位不变，元素在移动时会盖住其他元素

1.相对定位是参照元素在空间中的原有位置

2.绝对定位是参照距离他最近的有定位属性的父级元素，如果父级元素没有定位属性，则会参照文档

3.一般我们设置绝对定位时，都会找一个合适的父级将其设置为相对定位，不过最好为这个具有相对定位属性的父级设置宽高这样在各个浏览器中表现不会出现问题

层级index

定义属性是脱离文档流的，也就是说他有可能盖住其他元素 如果有多个定义属性存在，那么相互间就会存在遮 挡的情况 可以通过修改元素的Z-index属性来设置元素叠放的层次，Z-index值越高就会越在最上

背景图的固定

  background-attachment:fixed.背景不会随着滚动条滚动，一般加给body。图片名称用英文表示。

css背景精灵（又称css sprites,css雪碧）

  在一个有限大小的元素内，只显示大背景图的一部分，通过对背景图调位置定宽高来实现。

  在大型网站，使用雪碧图可以优化网络加载速度

透明度

opacity：0-1    低版本ie浏览器不兼容

filter:alpha(opacity=0-100)专门给低版本的ie浏览器设置

隐藏元素

visibility:hidden  内容隐藏，在文档流中占用位置还在（连连看）

display:none  位置不存在（消消乐）

取消li默认小圆点

li{list-style:none}

当鼠标悬停在元素上的效果

cursor:default

       corsshair 十字线

       pointer 手

       move 指示某对象可被移动

       text 指示文本

       wait 指示程序正忙（表/沙漏）

行内元素与块级元素居中设置

行内元素的水平居中：div{text-align:center}

行内元素的垂直居中：div{height:30px; line-height:30px}

既水平又垂直居中：div{

                  text-align:center;

                  height:30px; line-height:30px

                  }

块级元素

水平：div p{margin:0 auto; width:500px} /*一定要设置宽度*/

垂直：div{width:500px}

      div p{margin:0 auto; height:30px;line-height:30px;}

网页title中添加图标

head里面添加<link href="  "rel="shortcut icon"/>这段代码

使用ul，li来布局超链接

考虑搜索引擎排名因素（SEO），此时如果不用ul li而是直接在一个盒子里放锚文本超链接的栏目名称，虽然html代码量减少了，但这样搜索引擎容易认为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）。如果使用ul li列表标签布局，这个时候搜索引擎很容易辨别为有条理的列表型内容（对搜索引擎蜘蛛更加友好）。

补充：

float

1.可以让多个块级元素排列到同一行，如果浮动的一排元素父级元素宽度不够，最后的元素就会被挤到下一排

2.有float:left属性的元素会先往当前这一行最左边跑，如果跑到最左边，会从上一行的最右边出来，继续向做跑

3.如果浮动元素的上一行是正常元素，那么这个浮动元素是跑不上去的

4.一个正常元素在排列位置的时候会忽略掉他前面的浮动元素

5.浮动元素是脱离文档流的。

6.如果子元素是浮动，那么是撑不开父元素的高度；解决办法：给父级元素加一个overflow:hidden;

7.任何元素都可以浮动，浮动元素会生成一个块级框，行级就可以设置宽高了

8.flex不脱离文档流。

----------------------------------------------------------------------------------------

相对定位与绝对定位，固定定位

1、相对定位相对于原来的位置进行定位；绝对定位相对于离他最近的有定位属性的父级元素进行定位；固定定位元素相对于浏览器可视区域进行定位；

2、相对定位的元素原来在文档流里的位置还会被保留着；绝对定位元素在文档流中的位置不再被保留；元素原来在文档流里的位置不再被保留

3.固定定位与绝对定位完全脱离文档流；

4.每个有定位属性的元素，都独占一层；有定位属性的元素默认层级z-index是0，如果层级一样，那么后来者居上；只有有定位属性的元素才有层级属性；只有亲兄弟元素才能比层级

----------------------------------------------------------------------------------------

行级元素与块级元素

1.行级元素默认的宽度是根据内容来定的，内容需要多少宽高，就占用多少宽高

2.行级元素只能设置左右外边距，不能设置上下外边距

3.块级元素默认的宽度是100%

4.margin:0 auto;只能让块级元素在父级范围内水平居中

5.行内块级元素（块级行内元素）能设置宽高；能和其他元素待在同一行；常见行内块级元素：img 表单。

-----------------------------------------------------------------------

盒子模型

在css中，盒子模型包括内容、内边距（填充）、边框、外边距组成

margin左右外边距累加，上下外边距合并（取最大值）

Tips:

1.一定记住清除默认margin，padding

2.遇到对文本定位时，一定记住设置行高。（因为不同浏览器默认行高不同，会导致定位不准确）

3.父元素设置overflow：hidden来隐藏某子元素超出部分，但应该超出的子元素也被隐藏。这时可以

    sol1.将该隐藏的裁切成要用的大小，删除overflow

sol2.将外层div调大

4.a标签中文字颜色要在a标签中设定

5.定死宽度，防止收缩浏览器会乱掉

6.外层用id，内层用class，选择器选择时要尽量精准，带上父级

7.ctrl+？注释 ctrl+tab 切换

8.Html网页开发三部曲

a.根据内容选标签，将内容放到页面中

b.给元素加样式

c.给元素定位置