zoukankan      html  css  js  c++  java
  • 前端样式实践出真知系列(一)

    1、float:对前面的元素不会有影响,无论是块级元素还是行内元素的float,对后面的元素的影响都是:先假设当前元素不存在,后面元素的位置应该是什么样子的,然后再考虑下,float后的元素的大小是其真正的大小(即使是块级元素,大小=内容+padding+border+margin),这个大小会对后一个元素形成挤压。

    (备注:float和postion:absolution的主要区别是前者不会后受影响的内容重叠,会形成挤压,后者会重叠,相当于在另一个层上。)

    使用float和postion:absolution的元素的宽高都不会影响父元素的宽高,因为已不属于父元素内容的一部分。

    2、很多元素有其默认的属性,我们经常需要对其进行格式化(如dd默认右外边距-webkit-margin-start: 40px;),不然会给我们带来不必要的麻烦。

    3、父容器(如div),大小固定时,子容器(未设宽度时,默认父容器的宽度)内容超过父容器宽度时就会自动换行,除非子容器显示定义了宽度(可能比父容器宽,但父容器宽度不会随之增大)。

    4、元素类型:inline和block,即行内元素和块级元素,这里有个要注意的点:像a、span、strong这些 inline类型的标签无法指定宽(width)和高(height)margin-top和margin-bottom也无效,pading-top和padding-bottom两个属性很奇怪,padding垂直部分会有背景颜色(如果设置了),但不霸占位置。(img行内元素除外 margin和padding都有用)

    除了inline和block类型的显示,这里还有一个inline-block的显示方式。它显示的方式类似于inline,但是它相关的属性,例如,宽度,高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果,但是也有自己的问题。

    5、使网页内容水平居中:设置块的宽度,并且设置:margin:0 auto; 最后最好再设置下 text-align:center;

    6、两种盒子模型:W3C标准盒子模型(现代浏览器基本都是该模型)、传统IE盒子模型(只有IE6以下是这种模型,还有一些表单元素使用的是这种模型)。

    7、box-sizingCSS3的box属性之一(作用,显示声明使用哪种盒子模型):

    box-sizing : content-box (标准W3c盒子模型,默认值)|| border-box (传统IE模型)|| inherit

    8、一些行内元素 默认上下会留有空白,span标签上下都有,img元素默认底部会有块留白(间隙),去除办法,设置其display属性为block。

    9、字重,font-weight,默认正常是 500,加粗,一般设为700。

    10.div默认宽度为100%,即父容器的宽度,高度没有设置的话就是实际内容的高度。

    11、vertical-align属性:

    定义:

    vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

    理解:

    第一种用法,先看后面一句“在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解,如果给一个表格的td加一个vertical-align:middle的样式,表格里面的内容会垂直居中,同样的如果给一个vertical-align:bottom就会底部对齐,如果给一个vertical-align:top就会顶部对齐。

    第二种用法,看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

    top :把元素的顶端与行中最高元素的顶端对齐

    bottom:把元素的底部与行中最低元素底部对齐

    middle:把此元素放置在父元素的中部。

    总结:vertiacl-align,属性用于块级元素无效,只能用于行内元素,或td(表格的单元格)。

    12、像 a span 这些标签是没有layout的,对齐设置宽高是无效的,可以设置器  dispaly为inline-block使之有效。

    13、当父元素的木有设置border和padding是,第一个和最后一个子元素的margin是相对于父元素相邻的元素的。

    14、background属性的熟悉:

    (1)、background-color(背景图片):background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。 background-color:#bbb;

    (2)、 background-image 属性的默认值是 none,表示背景上没有放置任何图像。body {background-image: url(/i/eg_bg_04.gif);}

    (3)、background-repeat 属性设置是否及如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。repeat-x,背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次。

     (4)、background-position 属性设置背景图像的起始位置。(您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。)

    默认值:0% 0%。

    可能的值:

    • top left    上左
    • top center 上中
    • top right  上右
    • center left    中左
    • center center  中中
    • center right  中右
    • bottom left  下左
    • bottom center 下中
    • bottom right 下右 

    (以上值位置可以颠倒,top和bottom用于垂直方向  left和right用于水平)

    x% y%  第一个值是水平位置  第二个是垂直位置 (如果只设置一个值,则为水平位置上的值 垂直位置的值将为50%)

    x  y 水平 垂直   单位可以是像素。

    (5)background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。 

    默认值:scroll(随着元素的其余部分移动而移动)

    fixed 当页面的其余部分滚动时,背景图像不会移动。

    inherit 规定应该从父元素继承 background-attachment 属性的设置。

    (6) background-size 属性规定背景图像的尺寸。

    默认值:auto 

    length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。

    cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

    contain  把背景图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    15、(1)text-shadow属性:

    text-shadow: h-shadow v-shadow blur color;  水平阴影的位置|垂直阴影位置|模糊的距离|阴影的颜色 (前两个值是必须的)
    h1
    {
    text-shadow: 5px 5px 5px #FF0000;
    }
    box-shadow: 10px 10px 5px #888888; 盒子(如div ul)阴影,用法和文字阴影差不多
    (2)text-transform : none | capitalize| uppercase| lowercase  
    capitalize 值代表将每个单词的第一个首字母转换成大写,其余无转换发生

    (3) text-inedent:用于定义块级元素中第一个内容行的缩进。 text-indent: 20px;

    16、常用的几个伪类(也是以这种选择器):
    :nth-child(even) 偶数
    :nth-child(odd) 奇数

    :after  元素内容的前面

    :before 元素内容的后面 

  • 相关阅读:
    webstorm
    数据库中的内连接和外连接
    JVM加载class文件的原理机制
    内部类
    getString()方法与getObject()方法的区别
    Class.forName的作用
    JDBC事务处理
    合并两个排序的链表
    链表中倒数第k个结点
    反转链表
  • 原文地址:https://www.cnblogs.com/lxf1117/p/4109499.html
Copyright © 2011-2022 走看看