html+css-02

约定不等于承诺〃 2022-01-20 06:45 229阅读 0赞

### 1、常用属性 ###

【不可以继承的属性
    display: inline block inline-block table-cell none
    文本属性: vertical-align 垂直文本对齐  text-decoration 规定添加到文本的装饰  a标签的默认下划线
    text-shadow :文本阴影效果
    white-space:空白符的处理
    unicode-bidi: 设置文本的方向
    
    可以继承属性
    文字系列样式属性 font
    font-family:字体系列
    font-weight:字体粗细
    font-size:设置字体的尺寸
    font-style:定义字体的风格
    
    文本系列样式属性 
    text-align 文本水平对齐   line-height  行高  text-indent 文本缩进
    word-spacing:单词间的空白(字间隔)
    letter-spacing:字符间的空白(字符间距)
    text-transform :控制文本大小写
    direction:规定文本的书写方向
    
    盒子模型: 宽度和高度
    width
    height
    
    宽度和高度的单位
    1、px 像素 固定单位
    2、% 百分比 动态计算的单位(自适应 响应式)
    
    padding
    内边距会影响盒子在浏览器中的实际大小
    padding:10px 上 右 下 左 都是10px
    padding: 10px 20px   上下都是10px 左右都是20px
    padding: 10px 30px 20px   上 10px 左右 30px 下 20px
    padding:10px 20px 30px 40px    上 10px 右 20px 下 30px 左 40px
    
    border
    边框的宽度 边框线类型 边框线的颜色
    边框线类型
    solid:实线
    dashed: 虚线
    dotted:点状线
    边框的颜色  黑色     白色
    颜色的英文名 black  white
    #     #000		  #fff
    rgb   rgb(0,0,0)      rgb(255,255,255)
    border: 10px  solid #000 如果没有指明方向的情况下 表示四个方向都有边框线 而且边框线相等
    border-top    border-right .   border-bottom    border-left
    border-style 形状 border-color 颜色
    去掉边框线 border:0
    如果border属性 只有边框宽度 没有边框线的类型和颜色 导致border属性失效
    
    复制代码

### 2、三角形原理 ###

利用border的3个属性: border-width/border=style/border-color去实现   宽度和高度要为0 实现一个由小三角形组成的正方形
    要什么方向的三角形 只需要保留这个方向的颜色色值 其余的方向的颜色色值 设为透明即可
    .triangle {
        width :0;
        height:0; //宽高 必须设置为0 不然会变成梯形
        border-width:100px;
        border-style:solid;
        border-color: red transparent transparent transparent /*上 右 下 左*/
    }
    transparent: 颜色透明 
    三角形的大小 由border-width 边框线的宽度去控制
    三角形的颜色 由border-color 边框的颜色去控制
    
    transform:rotate(180deg);旋转180度
    border-radius:40px /*控制4个方向的圆角*/
    复制代码

### 3 margin面试题 ###

margin 面试题 （并列的两个子元素）
    一个盒子有上边距 另一个有下边距 会出现margin边距的重叠问题
    并列盒子的margin重叠 双margin的重叠
    取大值 并不是他们的相加之和 也就是谁大听谁的 
    
    margin的兼容问题:(父元素和子元素的margin-top传递问题)
    大盒子里嵌套小盒子 给小盒子加margin-top值 不但没有实现和大盒子之间的间距 反而传递到大盒子身上 导致整体下移
    => 解决兼容问题：
    1、overflow: hidden  解决margin-top的传递问题（此处并不是溢出隐藏）
    2、padding-top: 1px 这种方式会影响最后实际的高度 需要在高度height基础上减掉 才不会影响最后实际的高度
    3、border-top: 1px solid transparent (设置为透明色) 这种方式会影响最后实际的高度 需要在高度height基础上减掉 才不会影响最后实际的高度
    4、给子元素的margin-top值改为给父元素加padding-top 这样就避免了使用margin-top值导致的传递问题
    
    .wrap  {
        //外层父元素
        width: 300px;
        height:299px;
        backgroud-color:red;
        padding-top:1px
    }
    .inner  {
        //内层子元素
        width:200px;
        height:200px;
        margin-top:20px;
        background-color:blue
    }
    
    margin 负值的使用技巧
    .left {
        float:left;
        width:500px;
        height:800px;
        backgroud:red;
        font-size:50px;
    }
    .right {
        float:left;
        width:800px;
        height: 800px;
        backgroud: darkgreen;
        margin-left: -1300px (两者宽度之和)
    }
    
    1、margin外边距 padding内边距
    2、margin不会影响最后元素的实际宽高 padding是会影响最后元素的实际宽高的  如果要不影响 我们需要在width、height里减去padding的值
    3、margin主要用来控制元素和元素之间的间距    padding不能控制元素和另一个元素间的间距 只能控制它里边的元素
    复制代码

### 4 盒子模型的计算 ###

元素实际宽度 = 宽度width + padding-left/padding-right + border-left/border-right
    元素实际高度 = 高度height + padding-top/padding-bottom + border-top/border-bottom
    口号:元素的实际大小只会受padding和border的影响 和margin没有半毛钱关系
    如果加了padding和border的值 要在width和height上减去padding和border的值 否则内容会溢出
    
    border-left:40px    这样设置 不生效 因为缺少border-style 和border-color这两个属性
    
    text-align 表示文本的对齐方式
    center 居中对齐
    left 居左对齐
    right 居有对齐
    
    text-align:center 控制文本内容居中
    margin: 0 auto 控制块级元素居中
    
    height和line-height一致 文字内容垂直居中
    line-height 用来控制行间距(一行文字和一行文字垂直的间距)
    复制代码

### 5 backgroud相关属性 ###

backgroud-color: transparent 默认颜色是透明色 
    
    backgroud-image  背景之 背景图片
    backgroud-image:url("背景图片的路径")
    backgroud:url("背景图片的路径")
    logo 一般 都会用h1标签
    <h1 class="logo"> <a href="#">背景图片</a></h1>
    .logo a   {
        display: block; // a标签是行内元素 转化为block元素  宽度和高度  才能生效
        width: 173px;
        height: 66px;
        backgroud-image: url(http://www.zhufengpeixun.com/skin/20142/image/logo.png);
        text-indent: -9999px; /*首段缩进  将看不到背景图片这几个字*/
    }
    
    backgroud-repeat:背景重复(平铺的方式)
    默认值 repeat(x/y轴同时平铺)
    no-repeat 不平铺(重复)
    repeat-x x轴平铺
    repeat-y y轴平铺
    
    <h1 class="logo"></h1>
    .logo {
        width: 300px;
        height: 300px;
        backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png")
    }
    这样会出现很多重复的背景图  x轴和y轴都有
    将backgroud-repeat:no-repeat 能解决这个bug
    
    <div class = "nav"></div>
    .nav  {
        情况：navbj这个背景图片 正好是42px 所以我们不写backgroud-repeat 它也是只有x轴方向的平铺 因为y轴没有多的高度去平铺
        但是如果height跟navbj不相等的情况下 我们不写backgroud-repeat会出现除了x轴平铺之外 y轴也会看到平铺的效果 所以我们最好在backgroud的图片后面紧跟着要指明平铺的方式
        width:100%;
        height:42px;
        backgroud-image:url("http://www.zhufengpeixun.com/skin/20142/img/navbj.png")
        backgroud-repeat:repeat-x;
        //可以合并成 background:url("http://www.zhufengpeixun.com/skin/20142/img/logo.png")    no-repeat
    }
    
    backgroud-position:  x轴的坐标(水平方向) y轴的坐标(垂直方向) x轴越大 越往右 y轴越大 越往下
    50% 50% center center 正中心的位置
    backgroud-position:背景定位 规定背景图片的起始坐标点(位置)  单位:px (像素) % (百分比) 方位(top、bottom、left、right、center)
    方位只指明x轴 没有y轴  默认y轴为center
    百分比只写x轴 50% y轴默认也是50%
    backgroud-position:left ===> 则代表left center
    backgroud-position:right ===> 则代表right center
    复合形式 写法
    backgroud:#3385ff url(http://www.zhufengpeixun.com/skin/20142/img/logo.png)  no-repeat  center  center
    
    backgroud-attachment 背景关联
    1、scroll  背景随着页面滚动条的滚动而滚动(默认值)
    2、fixed  背景不会随着页面滚动条的滚动而滚动 固定不动
    
    背景类:背景尺寸 backgroud-size:x轴的尺寸大小 y轴的尺寸大小   px     100%  不允许为负值
    auto 自动 背景图片原来的尺寸
    cover 覆盖 背景图片会等比例伸缩 到完全覆盖盒子大小为止 ---- 会出现被拉伸 变虚
    contain 背景图片会等比例拉伸 只要有一条边 触碰到盒子的任何一条边 它就会停止缩放  ---- 会出现留白
    
    背景类:背景裁剪 backgroud-clip
    content-box:从内容区域之外开始裁剪(裁剪掉的是内边距和边缘区域)
    padding-box: 从内边距区域之外开始裁剪(不包括内边距   裁剪掉的是边框区域)
    border-box:从边框线之外开始裁剪(不包括边框线)
    
    backgroud-origin设置背景图像的参考原点(位置)
    
    border-box: 从border区域(含border)开始显示背景图片
    padding-box: 从padding区域(含padding)开始显示背景图像
    content-box: 从content区域开始显示背景图像
    
    backgroud-size    backgroud-origin    backgroud-clip css3新增的属性 不能写成backgroud的复合形式
    
    雪碧图
    技巧:backgroud-position x轴 y轴
    雪碧图的坐标主要是负值 默认值是 0 0
    
    overflow:hidden的3个作用
    1、溢出隐藏(超出内容之外的部分给隐藏起来)
    2、用来清除浮动元素产生的影响
    3、解决margin-top的传递问题
    复制代码

### 6 如何让多个元素在一行显示 ###

面试题:如何让多个元素在一行显示
    <div class = "wrap">
    <div class="content1">内容1</div>
    <div class="content2">内容2</div>
    </div>
    .wrap {
        font-size:0;
    }
    .content1 {
        display:inline-block;
        *display:inline;/*css hack* ie浏览器可以识别/
        *zoom:1;/*触发css hack的layout*/
        width: 200px;
        height: 100px;
        backgroud-color:darkblue;
        font-size:14px;
    }
    .content2 {
        display:inline-block;
        *display:inline;/*css hack* ie浏览器可以识别/
        *zoom:1;/*处罚css hack的layout*/
        width: 200px;
        height: 100px;
        backgroud-color:darkblue;
        font-size:14px;
    }
    1、用display:inline 把元素转化为行内元素 但是设置宽高属性不起作用
    2、用display:inline-block 可以让元素在一行显示 但是它会受空格/换行键的影响 会产生默认的间距
    ===>解决办法
    A)、去掉空格和换行键的影响 让标签都在一行(这种方法不推荐  阅读性差)
    B)、给加了display:inline-block属性的元素的父元素加一个属性font-size:0; 但是我们发现一个问题:元素里面如果有文字 文字消失了
     ===>解决:我们只需要在元素身上加一个font-size把父元素font-size:0覆盖
        其中display:inline-block在ie6 7下不兼容的解决办法 (css hack兼容)
        在两个子元素里加  *display:inline  *zoom:1
    3、利用浮动float:left/right 但是我们需要清浮动
    复制代码

### 7 省略号的面试题 ###

面试题:如何出现单行省略号
    h2  {
        /*单行文本出现省略号必备的4个条件 缺一不可*/
        1、width 宽度(不写宽度 默认继承父元素的宽度)
        2、overflow:hidden 溢出隐藏
        3、white-space:nowrap 强制不折行 /*white-space 处理元素内的空白*/
        4、text-overflow:ellipsis 文字隐藏的方式:以省略号的方式隐藏
    }
    面试题:多行文本出现省略号的必备条件:主要用在移动端手机页面
    h2  {
        width:600px;
        display:-webkit-box;/*弹性盒模型*/
        -webkit-box-orient:vertical;/*规定元素的排列方式:垂直排列*/
        -webkit-line-clamp:2   /*文本的行数 需要显示几行 值就写几*/
        overflow:hidden;/*溢出隐藏*/
    }
    复制代码

*  动力: 这是我的学习笔记(来源于视频或者查阅文档),您能从中得到收获和进步,是我分享的动力,帮助别人,自己也会更快乐
 *  期望: 不喜勿喷,谢谢合作！如果涉及版权请及时联系我,马上删除!