• css练习


    <!--1.列举你知道的css选择器-->
    基本选择器:标签选择器、id选择器、类选择器
    高级选择器:并集选择器、交集选择器、后代选择器、子元素选择器、伪类选择器、伪元素选择器

    <!--2.分别阐述类选择器和id选择器的作用-->
    ID选择器,#开头,ID不能重复
    类选择器,.开头,类可以重复
    一个页面上所有控件都ID不能重复,但class可以被多个 html控件套用.

    <!--3.如何重置网页样式-->
    *{padding:0;margin:0} or 百度里搜reset.css找别人写好的复制

    <!--4.对盒模型是怎么理解的?它们的属性有哪些?-->
    盒模型:在网页中基本上都会显示一些方方正正的盒子,这种盒子成为盒模型
    属性:width、height、padding、border、margin

    <!--5.什么是标准文档流?-->
    网页在解析的时候,遵循于从上向下,从左向右的一个顺序,而这个顺序就是来源于标准文档流。

    <!--6.浮动盒子的特点?浮动的好处?如何清除浮动?-->
    特点:脱标,相互贴靠,有“字围”效果,紧凑的效果
    好处:脱标,相互贴靠,有“字围”效果,紧凑的效果
    清除浮动:1、给父盒子设置高度(这种方法不灵活)
    2、clear:both 给浮动的元素最后面加上一个空的div,并且设置这个元素不浮动,然后设置clear:both
    3、伪元素清除法(常用):父盒子类名设置为clearfix。clearfix:{content:“”;clear:both;display:block
    height:0;visibility:hidden}
    4、overflow:hidden(常用)
    <!--7.精灵图的好处是什么?-->
    1、利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
    2、CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
    3、解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。
    4、更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便

    <!--8.定位有几种?阐述一下“父相子绝”定位是怎样理解的?-->
    相对定位、绝对定位、固定定位
    子元素绝对定位,父元素相对定位。让子元素 以其父元素为标准来定位。(如果不这么做,子元素就会相对body或浏览器定位产生不好的效果。)

    <!--9.什么样的盒子脱离了文档标准流?脱离文档标准流的盒子的特点是怎样的?-->
    浮动、绝对定位、固定定位、父子关系:儿子就是占用父亲内容的宽高,和父亲的padding没有关系。

    <!--10.z-index的规则是怎样的?-->
    层级关系的属性
    1、z-index表示谁压着谁,数值大的压盖住数值小的
    2、只有定位了的元素,才能有z-index,也就是说,无论相对定位、绝对定位、还是固定定位,都可以使用z-index,而浮动元素不能使用。
    3、z-index没有单位,就是一个正整数,默认为0.
    4、如果大家都没有z-index,或者z-index值都一样,谁写在HTML后面,谁就在上面压着。定位了的元素,永远压着没有定位的元素。
    5、从父现象:父亲怂了,儿子再牛逼也没有用。

    <!--11.display属性值有哪些?分别描述他们的意思?-->
    none:此元素不显示。
    block:将元素显示为块级元素,前后会带换行符。
    inline:默认值,元素会被显示为内联元素,前后没有换行符。
    inline-block:行内块级元素。

  • 相关阅读:
    【转】JMeter学习 参数化User Defined Variables与User Parameters
    【转】 JMeter学习(三十七)Jmeter录制手机app脚本
    【转】JMeter学习(三十五)使用jmeter来发送json/gzip格式数据
    vue axios配置element loading
    D3 JS 实现可视化
    Axios 封装
    Axios和.Net Core 跨域配置(当后台启用windows验证的情况)
    svg绘制圆形数据分布图
    svg 折线鼠标绘制
    svg 圆形标签数据分布
  • 原文地址:https://www.cnblogs.com/fantsaymwq/p/10339419.html
Copyright © 2020-2023  润新知