锐客网

  1. 首页 > it技术 > >

CSS样式和bootstrap

【CSS样式和bootstrap】1，background-position:用来设置图片的定位
2，定义图像透明度的属性是：opacity
3，行高：两行文字“基线”之间的垂直距离
行距：一行“底线”至下一行“顶线”的垂直距离
半行间距=（行高-字体大小）/2
4，当屏幕大小>=992px，使用col-md-;
当屏幕大小>=768小于等于992时，使用col-sm-
当屏幕小于768px，使用col-xs-*
当屏幕大于等于1200px时，使用col-lg-*
5，实现全屏效果，全屏的元素及其父类元素都要设置height:100%；将html,body标签设置成100%。
注意：height:100%是根据其父类高度变化而变化的
如：
>html,body{
height:100%;
}
6，重复背景图像：background-repeat:repeat;
背景图片不重复：background-repeat:no-repeat;
7，将块状元素中的文本，图片设置：
居中样式：text-align:center;
居左模式：text-align:left;
居右模式：text-align:right;
8，在下拉菜单下面加一条横线：


  • 9，jQuery html()方法不适用于HTML文档和XML文档
    jQuery用$符号作为其缩写
    jQuery不能与AJAX一起使用
    10，javascript中，有两种循环，类型为：for循环，while循环
    11，如何隐藏溢出元素中的内容：overflow:hidden;
    如何设置浏览器来自动处理溢出：overflow:auto.
    12，Z-index可被用于将在一个元素放置于另一个元素后、
    13，栅格系统的工作原理：“行（row）”必须包含在.container（固定宽度）或者.container-fluid（100%宽度）
    14，相对定位：position:relative
    绝对定位：position:absolute
    固定定位：position:fixed
    15，设置元素的最大宽度：max-width
    设置元素的最小宽度：min-width
    设置元素最大高度：max-height
    设置元素的宽度：width
    16，CSS背景图片的裁剪问题：先设置background:url("图片地址") no-repeat width height;
    17，当两个div水平排列时，要清除浮动，用
    >
    .clear{
    clear:both;
    }
    18，盒子模型溢出内容处理--overflow-x和overflow-y属性
    分别表示水平方向上的溢出处理和垂直方向上的溢出处理
    overflow-x和overflow-y属性的语法：
    >overflow-x : visible | auto | hidden | scroll | no-display | no-content;
    overflow-y : visible | auto | hidden | scroll | no-display | no-content;
    取值说明：visible：默认值，盒子溢出时，不裁剪溢出的内容，超出盒子边界的部分将显示在盒子元素之外
    auto：盒子溢出时，出现滚动条
    hidden：盒子溢出时，溢出的内容将被裁剪，并且不提示滚动条
    scroll：始终出现滚动条
    no-display：当盒子溢出时，不显示元素，该属性值是新增的
    no-content：当盒子溢出时，不显示内容，该属性值是新增的
    19，background-size的语法：
    1，background-size语法为：background-size:auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)
    2，background-size的属性值：
    (1)auto:此值为默认值，保持背景图片的原始高度和宽度
    (2)number:此值设置具体的值，可以改变背景图片的大小
    (3)percentage:此值为百分值，可以是0%～100%之间的任意值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算
    (4)cover:此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover；将背景图片放大到适合容器的大小，但这种方法会使背景图片失真
    (5)contain：此值刚好与cover相反，主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使图片失真
    20，布置响应式布局页面时，栅格系统应该和媒体查询结合使用。
    21，bootstrap栅格系统的工作原理：
    (1)“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）
    (2)使用“行（row）”在水平方向创建一组“列（column）”
    (3)你的内容应当放置于“列（column）”内，而且，只有“列（column）”可以作为行（row）的直接子元素
    (4)通过一些预定义的栅格class（.row and .col-xs-4）可以用来快速创建栅格布局
    (5)通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响
    (6)栅格系统中的列是通过指定1到12的值来表示其跨越的范围。
    22，全屏布局的方法：对于需要占据整个浏览器视口（viewport）的页面，需要将内容区域包裹在一个容器元素内，并且赋予padding：0 15px，为的是消除为.row所设置的margin:0 -15px; （如果不这样的话，页面会左右超出视口15px，页面底部出现横向滚动条）
    23，CSS中字体自适应：使用“相对长度单位”em，相对于当前对象内文本的字体尺寸
    24，display:inline的作用是设置对象做为行内元素显示，inline是内联对象的默认值（ps：内联对象就是不自动产生换行的元素，比如span）而我们一般用的div是块级元素，默认display属性是block，但将div的display设置为inline的话，则多个div可以像span一样显示在一行了。
    25，栅格系统中，每一行的列的和加起来不能超过12，一旦超出12之后，其就会换一行
    26，background-position：后面有两个属性，第一个是水平位置，第二个是垂直方向的位置，这里需注意的是两个属性的顺序。
    比如说 ：background-position: left -29px; (当中的left指从图片的最左端读起，-29px就是将图片向上移动29px,然后开始读)再如：background-position: 15px 20px; (指将图片向右移15px,向下移20px; )简单地说，就是以图片的左上角顶点为原点，往下和右都为正，反之为负，

      推荐阅读


      上一篇：妙培育儿说——孩子每天睡醒就要看ipad、玩手机，怎么办（）

      下一篇：一生太短