zoukankan      html  css  js  c++  java
  • CSS元素的基本应用(附加京东面试题)

    ONE!

    列表~

    列表分为有序列表和无序列表还有定义列表(ul和ol,dl)

    ul 无序列表

     ul它天生自带内边距  还有一个 p 标签也是天生就自带内边距的(内边距 padding)

    list-style: 这是样式属性 除去列表前的符号(ul的列表样式是disc和circle还有square;ol的样式是1234这样的类型(如果想要消除这个样式就得使用这个属性

     list-style的属性值有 circle(空心圆) dic(实心圆)square(矩形)none(空)

    ol 有序列表

    1.内部必须有子标签<li></li>

    2.天生自带内外边距

    其中 ol和ul不同之处就在于前面符号的区别

    有序列表如果想要改变前面的1234,可用type这个标签属性来改变

    dl自定义列表

    dl是自定义列表,它中间包括dt(小标题) dd(内容),有三部分组成

    列表的作用

    做二级菜单,导航等

    这里是下一个内容,也是一个比较热的探讨话题

    备注

    margin和padding问题的探讨:

    第一种 margin:200px 只设置一个值, 这说明它的四周(top right bottom left)都是200px

    第二种 margin:200px 100px; 设置两个值 这说明它的 上下是200px 左右是100px

    第三种 margin:200px 50px 100px; 设置三个值 这说明它的 上是200px 右是50px 下是100px

    第四种 margin:200px 50px 100px 50px; 设置四个值 这说明它的 上是200px 右是50px 下是100px 左是50px

    (它的顺序是是逆时针顺序转动的)

    padding 同上

    实际占用的空间大小:width+border*2+padding*2+margin*2

    实际高度=height+padding-top+padding-bottom+border*2

     margin的坍塌现象是什么?

     

    相邻的两个块级元素同时这是margin时,他们之间的外边距不会叠加,会取最大的值,这种现象叫做margin的塌陷

    下一个是块级标签和内敛标签 

    有的标签在设置背景的时候会独占一行,还有的会随着内容的增减而改变自己的空间大小根据以上现象,标签分为块级标签和内敛标签

    块级标签有:div p h1-h6 ul li dl 等

    内敛标签有:span img i b a em icon(矢量标签) 等

    二者的区别

       块级:1.块级元素会独占一行 2.块级可以设置宽高

       内敛:1内敛不会独占一行 2.内敛不可以设置宽高 3.内敛元素的margin中上下去不了作用

    二者的转换

     块级转行级

    给块级元素添加属性 display:line; display是显示的意思 inline 是行的意思

    行级转块级

     给行级元素添加属性 display:block;  block是块的意思

    行级块元素

    需要给元素添加属性 display:block;

    (这个时候就可以给它设置宽高了,并且可以在一行了,margin可以随便使用)

    备注

    line-height  行高的意思,设置字体的垂直位置

     

    line-height的值和height的值相同  文本就上下居中

    拓展 line-height的属性值为:数字;像素;这两种

    当属性值为2 的时候 line-height的值是2*font-size的大小=36px

    并集选择器(这是讲的第八个选择器了)

    并集(用符号“*”)选择器 的利弊

    好处:就是省事(用白话来说),因为它选择的是body内全部的标签

    弊端:也是因为它太省事了,因为它选择的是全的标签,所以也会选择没有用的标签,这无疑是增大了它的负荷,所以也是它的弊端。

  • 相关阅读:
    杭州办理招行香港一卡通(两地一卡通)攻略
    Android高手进阶教程(二十)之Android与JavaScript方法相互调用!
    Android应用的自动升级、更新模块的实现
    18个最好的jQuery表格插件
    系统的本地策略不允许你采用交互式登录
    android中判断横屏或者竖屏并改变背景
    记录几个东东
    jsAnim学习
    win7下安装oracle10g出现未知错误,程序异常终止
    oracle创建用户并授权
  • 原文地址:https://www.cnblogs.com/blankOne/p/9642632.html
Copyright © 2011-2022 走看看