• 学习html/css基础的重点笔记


    1、权重问题    

          内联样式表 > id选择符 > class选择符 > 类型选择符(所有html标签名称)

          内联样式表 > 内部样式表、外部样式表

          内部样式表、外部样式表的权重与书写顺序有关,后书写的权重高   

          注:虽然后书写的权重高,但是属性依旧被执行,只是相同属性会被覆盖,不同属性仍然显示

          !important权重最高
          开发者样式 > 读者样式 > 浏览器样式

         !!!当出现权重的时候就会出现层叠性

    2、用css画三角

         a.将盒子的宽高设为0px;

         b.添加边框border;

         c.为边框设置颜色border-color: ,不需要显示的边设置为透明色transparent。

    3、文本溢出时以省略号显示

         a.文本设置不换行 white-space:nowrap;

         b.溢出文本隐藏处理  overflow:hidden;

         c.溢出文本以省略号显示  text-overflow:ellipsis;

         d.前提条件:存放文本的元素必须设有宽度;只能用在单行文本。

    4、关于图片(浏览器解析其属性为inline)可以添加宽高的解答

          img为置换元素(通过标签或者属性来改变元素在页面中的显示状态),且置换元素在浏览器解析的过程中生成一个框。

          非置换元素:浏览器中大多数元素为非置换元素,将内容直接展示给浏览器。

    5、大图在小盒子里居中显示

          a.为父元素添加定位   position:relative;  子元素添加定位  position:absolute;

          b.子元素向右移动父元素的一半   left:50%;

          c.子元素向左移动自身的一半   margin-left:-宽度一半;

    6、图片整合(精灵图 css sprites)

          a.整合规则:背景图必须为透明 (png/gif);

                               根据实际应用场景,小图标之间留出足够的间距;

                               尽量上下排列;

                               如果存在左右排列的小图标,li列表符号的背景图放在图片的最右侧。

          b.本质:控制背景图的位置   background-position:

          c.优点:减少服务器请求次数;减小图片质量

    7、高度塌陷问题

          a.出现情况:当子元素有浮动,父元素没有设置高度或者设置了最小高度时,会出现高度塌陷问题。

          b.解决办法:

                  法一:谁塌陷就给谁添加属性  overflow:hidden;

                     原理:overflow:hidden;出发了BFC,BFC规定计算BFC高度时,浮动元素也参与计算。

                     优点:代码量少;缺点:会隐藏定位到父元素外部的内容。

                  法二:在浮动元素下方添加一个空标签,并为空标签添加属性  clear:both;

                     原理:both会忽略以上浮动元素预留出来的空间。

                     优点:代码量少;缺点:产生不必要的元素,造成代码冗余。

                  法三:万能清除法(闭合浮动)谁塌陷给谁添加    :after{content:" ";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

                      原理:visibility:hidden;对元素隐藏但仍留有空间。

                      优点:解决了以上两种方法的缺点;缺点:代码量相对来说有点多。

    8、浏览器bug以及解决办法

                 a.当图片添加了a标签后,在IE浏览器上会出现边框

                      css hack:给img添加border:0;   或者   border:0 none;

                 b.在div中插入图片,图片会将div下方撑大大约3px

                       css hack 1:div标签与img标签写同一行;

                       css hack 2 :将img转为块状元素   display:block;

                 c.表单元素对齐方式不一致(不在同一水平线)

                        css hack :给表单元素添加浮动  float;

                 d.按钮大小不确定(边框问题)

                        css hack 1:只要按钮不出现在表单里都用a标签做;

                        css hack 2:为按钮标签添加一个父元素,并将样式添加在父元素上   eg:<span><input type="submit"></span>

                        css hack 3:如果按钮是一张图片,切图放在a标签里;

                e.鼠标指针bug    cursor:hand;(只有IE识别)

                         css hack:cursor:pointer;

                f.关于透明度的兼容

                          css hack:opacity:属性值 ;(取值范围为0-1)

                                           filter:alpha(opacity=属性值);(取值范围为0-100)IE

                     opacity:子元素会随父元素一起透明          rgba:背景透明        transparent:文字透明

                 g:margin的bug

                      bug1:给子元素添加margin-top。父元素会一起下移 

                      bug2:纵向margin值不叠加

                 h:IE6的bug

                      bug1:双倍浮向边界(浮向边)margin值会双倍显示

                          css hack:给浮动元素添加属性   display:inline;

                      bug2:默认高度  当盒子的高度小于16px时会保持16px显示(IE默认最小高度为16px,认为内部留有最小文字高度) 

                          css hack 1:font-szie:0;

                          css hack 2:overflow:hidden;

                 i:两个浮动元素的宽 50%+50%>100%

                          css hack:给右侧元素添加属性   clear:right; 

                 j:导航条内li和a的bug

                          css hack:给li和a都添加float

    9、BFC (block formatting context    独立渲染区   只有Block-level box参与      概念上的东西,用来解决一些排版问题)

           布局规则:a.内部box会一个接一个垂直排列;

                             b.Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠;

                             c.计算BFC高度时,浮动元素也参与计算;

                             d.BFC区域不会与float box重叠;

                             e.每个元素的margin box的左边, 与包含块border box的左边相接触;

                            f.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。

           触发条件:a.根元素html;

                             b.float不为none;

                             c.position为absolute或fixed;

                             d.display为inline-block / table-cell / table-caption / flex / inline-flew;

                             e.overflow不为visible。

           作用:a.清除内部浮动;

                      b.防止margin值上下重叠(加上一个会触发BFC的属性);

                      c.自适应两栏布局

    10、继承性

      不可继承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

      所有元素可继承:visibility和cursor
      内联元素可继承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
      块状元素可继承:text-indent和text-align
      列表元素可继承:list-style、list-style-type、list-style-position、list-style-image
      表格元素可继承:border-collapse

  • 相关阅读:
    python3+requests库框架设计03-请求重新封装
    python3+requests库框架设计02-封装日志类
    [patl2-001]紧急救援
    [patl1-046]整除光棍
    latex学习
    matlab基础功能实践
    dll注入及卸载实践
    编译原理大作业暂存
    12.24逆向工程上机作业整理
    [poj1703]Find them, Catch them(种类并查集)
  • 原文地址:https://www.cnblogs.com/youy67/p/10167928.html
Copyright © 2020-2023  润新知