zoukankan      html  css  js  c++  java
  • 9.6(day4)

    #1 盒模型

    从内到外:conter < padding < border < margin

    #2 border(边框)

     

    同时设置四条边:

           border-width:2px;     边框宽度

           border-style:solid; 

           solid(单实线),double(双实线),dashed(虚线),dotted(点线)

           border-color:white;   边框颜色默认和文字颜色保持一致

           border:2px solid white;   组合写法(注意顺序)

    四条边分开设置:

           border-top:2px solid white; 

           border-left:2px solid white; 

           border-right:2px solid white; 

           border-bottom:2px solid white; 

    宽度组合写法:

           border-width:2px;                          四条边

           border-width:1px 2px;                   上下1px,左右2px

           border-width:1px 2px 3px;            上1px,左右2px,下3px

           border-width:1px 2px 3px 4px;     上1px,右2px,下3px,左4px

    #3 outline(轮廓线)

    当某个元素获得焦点的时候会出现轮廓线,最典型的的就是文本框

    outline:2px solid red;

    outline:none;

    #4 outline与border的区别是什么?

    1.   outline不占页面空间,border占空间

    2.   outline不能四条边拆开设置  

    #5 标准盒模型与怪异盒模型(IE盒模型)的区别

    标准:width和height是不含border,padding的

    怪异:width和height是包含border和padding

    #6 box-sizing(主流处理方案)

    box-sizing:content-box;    默认情况

    box-sizing:border-box;     border和padding被包含在width,height之中

    最终在页面上,width和height会自动被减成80*80

    #7 reset.css

    通常会将通用的样式,比如去掉列表的点,去掉外边框,统一字体,统一字号等等。

    这样可以比较好的兼容各浏览器,自己设置的尺寸不会受到影响

    #8 float

    浮动会使元素脱离文档流,按照指定方向发生移动,直到它的外边缘碰到包含框或

    另一个浮动框的边框为止

    float:left;         左浮动

    float:right;      右浮动

    float:none;      不浮动

    #9 特性

    1. 使块元素在一行显示;

    2. 脱离文档流;

    3. 提升层级;

    4. 内嵌元素自动转换为块元素;

    5. 不设置宽度时,可以适应内容的宽度。

    #10 清楚浮动

    1. clear:both;     在浮动元素的最后加一个div设置clear

    2. 父标签没高度,字标签设置了浮动,此时父标签的高度的高度就消失了

        给父标签设置:overflow:hidden;

     #11 定位

    position:static;     静态:默认值

    position:relative; 相对定位

    position:zbsolute;   绝对定位

    position:fixed;         固定定位

    relative:提升层级,可以使用left,right,top,bottom从原始位置进行偏移;

    absolute:提升层级,也可以使用left,right,top,bottom从已经定位的父元素

                     左上角进行偏移,如果父元素没有定位,就从html(页面左上角)偏移

                     脱离文档流;

    fixed:与绝对定位类似,区别在于始终相对浏览器窗口进行定位。

    #12 z-index

    1.   层级必须加给定位元素

    2.   数值越大层级越高

    3.   层级要在同级元素之间作比较

    #13 overflow

    overflow:visible;      内容溢出就溢出,内容会显示在元素外面

    overflow:hidden;     溢出的部分被隐藏

    overflow:scroll;       不论内容是否放得下,都会显示滚动条的

    overflow:auto;         内容放得下不出现滚动条,内容放不下出现滚动条

    #14 vertical-align(垂直对齐方式)

    vertical-align:top;          顶部对齐

    vertical-align:middle;    垂直居中

    vertical-align:bottom;    底部对齐

    vertical-align:baseline; 基线对齐

    特性:

    1.   块元素用不了

    2.   给要垂直对齐的那个元素添加,而text-align是给父元素添加

    #15 display属性

    以什么形态来显示当前元素

    div{display:inline;}            当成行内元素

    b{display:block;}               当成块元素

    div{display:inline-block;}   当成行内块元素(在一行且能设置宽高)

    div{display:table;}              当成表格

    div{display:table-cell;}       当成td/th

    div{display:none;}              隐藏当前元素

  • 相关阅读:
    嵌入式系统编程和调试技巧
    使用Kotlin开发Android应用(II):创建新project
    2015 Multi-University Training Contest 2
    C#开发Unity游戏教程之游戏对象的属性变量
    Java开发project师案例-网络日志分析系统
    Flask
    Flask
    Flask
    Flask
    Flask
  • 原文地址:https://www.cnblogs.com/jihongtao/p/9597055.html
Copyright © 2011-2022 走看看