zoukankan      html  css  js  c++  java
  • CSS基础

    1、类标签和id标签的区别?

    类选择器在修改样式中用的最多,并且可以多次使用;id选择器一般用于页面唯一性的元素上,经常和JS搭配使用。

    2.CSS字体属性?

    font-family定义字体系列
    font-size定义字体大小,标题标签需要单独指定文字大小
    font-weight定义字体粗细,700=>bold 400=>normal
    font-style定义字体风格,normal标准字体样式 italic斜体

    3.CSS文本属性?

    color定义文字颜色
    text-align定义文本内容的水平对齐方式
    text-decoration定义添加到文本的修饰 underline添加下划线 none删除下划线
    text-indext定义文本内容第一行的缩进 2em表示缩进当前元素2倍文字大小的距离
    line-height定义行高 会继承

    4.CSS的复合选择器?

    后代选择器:所有后代 div a{}
    子代选择器:亲儿子 div>a{}
    并集选择器:为多组标签定义相同的样式 div,h2{}
    伪类选择器:添加特殊的效果。
    (1)链接伪类选择器:有顺序 link visited hover active a:hover{}
    (2)focus伪类选择器:为获得焦点的表单元素修改样式 input:focus{}

    5.CSS元素的显示模式?

    块元素: <h1>-<h6> <p> <div> <ul> <ol> <li>
    行内元素: <lable> <a> <span> <strong> <b>
    行内块元素: <img> <input> <textarea>

    6.CSS的背景

    background-color background-image background-repeat background-position background-attachment(图片是否固定)
    background-size 规定背景图片的尺寸 background-size:63px 100px;
    background-origin 属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域

    7.CSS的三大特定?

    (1)层叠性:就近原则
    (2)继承性:text- font- line- color cursor 这些样式会被继承
    (3)优先级:当同一个元素指定多个选择器,就产生了优先级
    根据选择器权重大小来选择样式
    !important 无穷大 > 行内样式style 1000 > id 100 > 类 10 > 元素 1 > 继承和* 0

    盒子模型

    8.盒子模型

    (1)边框
    content-box盒子模型中border会影响盒子大小
    注意层叠性 border:1px solid blue;border-top:1px solid blue;
    (2)内边距
    content-box盒子模型中padding会影响盒子大小
    典型应用:当导航栏里面每个栏的字数不一样时,可以给盒子的左右设置padding值,使撑开盒子,而不给盒子宽度。
    (3)外边距
    content-box盒子模型中margin不会影响盒子大小
    典型应用:外边距可以让块级盒子水平居中

    9.外边距合并/塌陷

    外边距塌陷也称为外边距合并,是指两个在标准流中相邻(兄弟或父子关系)的块级元素的外边距组合在一起变成单个外边距。不过只有上下外边距才会有塌陷,左右外边距不会出现这种问题
    (1)兄弟关系
    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)

    解决办法:只给一个盒子添加margin值
    (2)父子关系
    对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,则父元素会有外边距,且合并后的外边距为两者中的较大者,子元素会紧贴父元素。即使父元素的上外边距为0 也会发生合并

    解决方法:1、可以为父元素定义1像素的上边框或上内边距。 border: 1px solid red; padding: 1px;
    2、可以为父元素添加 overflow:hidden;
    3、脱离标准流。 float: left; position: absolute;
    4、子元素的margin-top改为padding-top

    10.圆角边框

    border-radius:50%;
    border-top-left:15px;(顺序不能变)

    11.阴影的添加

    (1)盒子阴影

    div:hover{
        box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
    }
    

    (2)文字阴影
    text-shadow

    浮动

    12.浮动的特点?

    浮动脱离了标准流,具有行内块元素的特性,不过浮动盒子间无缝隙。
    一浮都浮
    纵向排列找标准流,横向排列找浮动

    13.清除浮动

    当父元素无高度,并且子盒子浮动了,父盒子影响了下面的布局,此时需要清除浮动。方法有:
    (1)额外标签法:隔墙法,在浮动元素后面添加空的块级元素
    (2)给父元素添加overflow属性
    (3)给父元素添加伪元素。其实也是隔墙法,但是结构上不需多加标签,空盒子由CSS生成。

    定位

    13.定位的类型和特点

    相对定位<=>粘性定位 都占有原来的位置
    绝对定位<=>固定定位 都不占有原来的位置
    定位的盒子会出现重叠的情况,可以用z-index控制盒子的前后次序。

    14.行内块元素之间为什么会有空白?怎么消除?

    元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,原来HTML代码中的回车换行被转成一个空白符,在字体不为0的情况下,空白符占据一定宽度,所以inline-block的元素之间就出现了空隙。
    (1)父元素中设置font-size: 0,在子元素上重置正确的font-size

        .container {
           800px;
          height: 200px;
          font-size: 0;
        }
    
        .container .one,
        .container .two {
           200px;
          height: 200px;
          display: inline-block;
          font-size: 14px;
        }
    

    (2)为子元素设置float:left

  • 相关阅读:
    乐器、音乐与声学
    函数的功能与坐标轴的理解
    函数的功能与坐标轴的理解
    波、波长与频率
    波、波长与频率
    长方体的研究
    彻底理解线索二叉树
    SSH框架总结(框架分析+环境搭建+实例源代码下载)
    深入浅出WPF 第一部分(3)
    iPad 3g版完美实现打电话功能(phoneitipad破解)
  • 原文地址:https://www.cnblogs.com/yyrecord/p/13228416.html
Copyright © 2011-2022 走看看