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,在下拉菜单下面加一条横线:<li class="nav-divide"></li>
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水平排列时,要清除浮动,用
><div class="clear"></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;)简单地说,就是以图片的左上角顶点为原点,往下和右都为正,反之为负,

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,705评论 1 92
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    可爱傻妞是我的爱阅读 297评论 0 0
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    书写人生吖阅读 404评论 0 0
  • 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般...
    鲁大师666阅读 401评论 0 3
  • 十几天没有写文,婵姐又催更了:你不是从寺庙回来了吗?怎么还不发新文章啊。 啊,是的,我是从寺庙回来了,不过,我还有...
    当时明月在zh阅读 869评论 0 1