梁小新blog

HTML+CSS重点总结

Posted on

元素的分类

  • 行内元素( inline ):a b strong del em ins span
  • 行内块级元素( inline-block ):input button img textarea
  • 块级元素( block ):div ul li dl dd dt ol

标签的语义化理解

  • （关键）合适的地方使用合适的标签
  • 对SEO的好处（讨好网络爬虫）
  • 提升用户体验
  • 方便代码的维护和修改

SEO

  • 页面的语义化
  • meta和title标签的对页面的描述
  • 广发外链
  • 将动态页面静态化（有助于网络爬虫）

各种居中

1.水平居中
  • 行内元素：父元素设置 text-align:center;（注意：不能直接在行内元素上设置，没效果）
  • 行内块级元素：父元素设置 text-align:center;
  • 块级元素：该元素上设置 margin:0 auto;
  • 绝对定位元素在父盒子上水平居中：left:50%(父盒子宽度的一半);margin-left:负的子盒子宽度的一半；
2.垂直居中
  • inline: 父元素上设置 line-height:父元素高度 ；（可直接在inline元素上设置该属性）
  • inline-block:1.在该元素设置 position:relative; top:父元素高度的一半; 2.margin-top:负的该元素高度的一半;
  • block: 1.在该元素设置 position:relative; top:父元素高度的一半; 2.margin-top:负的该元素高度的一半;（理解：先移离中间的下一点，再上来一点点，居中，OK）
  • 左边图片，右边文字（此时图片与文字的基线对齐）：文字设置vertical:middle;可与图片居中对齐.

各种隐藏

  • overflow:hidden; 把在容器超出的部分隐藏掉；
  • visibility:hidden; 可视化隐藏，在页面上会保留原来的位置（隐身の术，但在页面上占据位置）
  • display:none; 完全隐藏，在页面上不占据位置（完全消失）

特殊现象

1.margin的合并现象
页面上两个div，一上一下，上面div1设置margin-bottom:200px; 下面div2设置margin-top:100px;则两个div 在垂直方向上的margin 为 200px;（谁大谁说话）
2.margin的塌陷现象
父盒子包着一个子盒子，子盒子设置margin-top:50px;则父盒子跟着子盒子一起掉下去；

解决方法：

  1. 给父盒子添加一个上边框（边框）
  2. 父盒子设置 overflow:hidden;
  3. 浮动也可以
3.padding特殊现象
如果大盒子里面有一个小盒子，小盒子没有设置宽度，那么将来小盒子内容的宽高默认跟大盒子一样，但是这个时候会给小盒子设置一个padding-left，padding-right，那么将来小盒子的大小不会改变，但是内容会变小
4.空格合并现象
编写HTML代码时，换行、多个空格、tab等，在页面上只会显示一个空格

属性的连写规则

  • font: font-style font-weight font-size/line-height font-family ;
  • background: background-color background-image background-repeat background-position ;
  • margin:10px 5px; 上下10px 左右5px
  • margin :10px 5px 7px; 上10px 左右5px 下7px
  • margin:5px 3px 4px 9px; 上 右 下 左（顺时针trbl）

继承

  • text- line- font- 系列开头属性都可以继承
  • color 可继承
  • a标签颜色不能继承（浏览器有默认设置）
  • h系列大小不能继承（浏览器有默认设置）
  • 盒子 width height 不能叫继承 （no）

伪类

  • a 链接 : link visited hover(常用) active
  • :focus :input type=text 获取焦点时 a链接也可用
  • :first-child : 选择器 h3:first-child →匹配同辈的所有元素中，第一个元素并且是 h3 的元素。
  • :after 给元素的后面添加内容 （常用于伪类浮动）

CSS选择器的种类

  • !important:
  • 行内: 不用
  • ID选择器: 唯一性 #ID{}
  • 类选择器: 可多个，可重复使用 .className {}
  • 伪类选择器: 满足特定条件，完成某个动作 :hover{}
  • 标签选择器: p{} div{} span{}
  • 通用选择器 *{ } 用于CSS初始化
  • 继承
  • 并集选择器
  • 后代选择器 .sss p → .sss 下面的所有元素p → 孙子代也会选中
  • 子代选择器 .sss>p → .sss下面的所有子元素p → 孙子代没有选中

定位的比较

position 定位名 static relative absolute fixed
是否脱标 默认定位 是 是 是
是否覆盖在标上 否 是 是 是
是否改变显示方式 否 否 是，inline-block 是，inline-block
定位的位置（基点） 否 自己的顶点 1.没有父盒子→body顶点 2.父盒子没定位→body顶点 3.父盒子有定位→父盒子顶点 body顶点

应用：子绝父相

css初始化

  • *{ padding: 0;margin :0; }
  • input button { borader: 0; }
  • 浮动 .fl{ float: left; } .fr{ float: right; }
  • 清除浮动 .clearfix{content: “”; height: 0; line-hehight: 0; display: block; visibility: hidden; clear: both;}
  • 布局时，看看页面大概有哪些公用样式

logo的处理

为了突出重要性，<h1><a>此处放对logo的描述</a></h1> 
a标签设置 text-indent: -10000;（移出浏览器）

浮动的那些事

浮动的特点
  • float:left; float:right;
  • 脱离标准流，在页面上不占据位置；
  • 会改变元素的显示方式 inline-block；
  • 覆盖在标准流之上；
浮动注意点
  • 左右浮动的元素互不干扰
  • 浮动过后的元素没有空格
  • 文本会给浮动以后的元素“让位” （应用：文字环绕）
浮动的位置
  • 如果元素A浮动，它的上一个元素B没有浮动，那么将来A会显示在B的下方
  • 如果元素A浮动它的上一个元素B也浮动，那么将来A会显示在B的后边（屏幕的宽度足够同时显示两个元素）
清除浮动
  • 父盒子之间添加一个空的div .clearfix{clear:both;}(不推荐用，给页面添加了更多的标签)
  • 给父盒子设置 overflow:hidden;（不推荐用，缺点：会使页面中的某些区域显示不完整）
  • 给父盒子添加一个伪类元素，(最常用) .clearfix{content: “”; height: 0; line-hehight: 0; display: block; visibility: hidden; clear: both;} 兼容IE6 .clear{ zoom:1; }

优先级

css选择器优先级

!important > 行内 > ID选择器 > 伪类选择器 > 类选择器 > 标签选择器 > 通用选择器 >继承

层级优先级

z-index: ;

定位 > 浮动 > 标准流

magin,和padding在行内元素的上下设置是不起作用的，但是左右不受影响