css学习笔记

  • table元素

    • border-collapse:collapse 去掉默认边框
    • align属性,这个属性是div的属性,并不是css的样式,可以让div中的内容进行对齐
    <div align='center'>
    <input type="text" />
    <br/>
    <input type="text" />
    </div>
    

  • background详解

    • background-image,背景图片可以有多个,“,”隔开,多个图片由上向下显示
    background-image:url(top-image.jpg),url(bottom-image.jpg);
    
    • background-clip,控制背景图片的‘位置‘
    background-clip:border;//背景在border边框下开始显示
    background-clip:padding;//背景在padding下开始显示,而不是border
    background-clip:content;//背景在内容区域开始显示
    background-clip:no-clip;//默认属性
    
    • background-attachment,定义背景图片随滚动轴的移动方式
    background-attachment:scroll;//,默认值,随页面的滚动背景图片也移动
    background-attachment:fixed;//不随页面滚动而移动
    background-attachment:inherit;//继承
    
    • background-position,背景图片的起始位置,有个前提background-attachment:fixed;
    //前提别忘记
    background:x y;
    //分别是水平距离和垂直移动距离,记住左上角才是顶点,假设(0,0)的话,那就是左上角对齐,假设(100px,100px)那就是水平向右移动100px,垂直向下移动100px
    //值可以是百分数
    //值还可以是top right bottom left
    //假设值为(right,top),也就是说明图片的右上角和标签的右上角重合
    //假设值为(left,top),也就是说图片的左上角和标签的左上角重合,这就是所谓的“对应点”
    
    • background-size,大小
    background-size:contain;//缩小背景图片以适应标签元素
    background-size:cover;//放大充满整个标签元素
    background-size:100px 100px;//固定大小
    background-size:百分比;//根据内容标签元素大小,来缩放
    图片尺寸大小
    
  • z-index,仅仅在绝对定位、相对定位、固定定位的前提下才有效

  • 替换元素

替换元素指的<input>,<textarea>,<select>,
<img>等元素,这些元素往往没有实际的能容,即一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。

  • 不可替换元素

不可替换元素指的是其内容直接表现给用户端的(比如浏览器)元素。

  • 隐藏元素

    • visibility:hidden元素虽然不可见,但是仍然在文档流中,仍然占据原来的位置,就像存在一样,只不过看不见。
    • display:none,元素不在文档流中,真正的消失,对其他元素也没有任何影响。
    • opcity:0,与visibility一样,虽然表面上看不见了,其实还是存在的。
  • 块级元素

    • 水平格式化(以下的前提都是块级元素⚠️)

    水平属性,margin-left,border-left,
    padding-left,width,padding-right,
    border-right,margin-right七个,七个之和必须是包含块的宽度。只有width和左右外边距的值可以设置为auto。

    • auto的意义在于自动计算,使七个值的总和加起来是包含块的宽度。
      • 假设包含块的总宽度为400,然后外边距和宽度都设置为100px,(加起来是300,并不是400),那么此时用户代理将会将右外边距重置为auto,表现的结果就是左外边距100px,width100px,然后右外边距为200px。
      • 假设只有width有具体的宽度,左外边距右外边距设置为auto,那么就会等分,表现出来就是居中啦😍!!!!
      • 如果width和左右外边距都设置为auto,那么左右外边距都会被解释成0,然后width会尽可能的宽。
  • 垂直格式化(以下的前提都是块级元素⚠️)
    • 元素的默认高度由其内容决定。
    • 垂直属性也是有七个,和上面的水平属性一样,这七个之和加起来等于height。只有height和上下外边距可以设置为auto。
    • 如果正常流中的块元素的margin-top或margin-bottom设置为auto,它会自动计算为0。如果值为0,就不能很容易的将正常流元素在其包含块中垂直居中。这也说明,如果将一个元素的上、下外边距设置为auto,实际上它们都会重置为0,使元素框没有外边距。(但是对于定位元素,上下外边距为auto时,其处理有所不同)height必须设置为auto或者是某种类型的非负值。
    • 👉百分数高度。如果一个块级正常流元素的height设置为一个百分数,这个值则是包含块height的一个百分数(包含块的高度是具体的值,不是auto)❗️;如果包含块的高度是auto,然后子元素的高度是百分数,那么子元素的百分数高度会被重置为auto,表现出来的就是父高度与子高度相同。
    • auto高度。如果块级正常流元素设置为height:auto,分两种情况->
      • 子元素为内联元素时,显示时的高度正好足以包含其内联内容。
      • 子元素只有块级元素,其高度为从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。
  • placeholder的颜色
::-webkit-input-placeholder { /* WebKit browsers */ 
color: #ccc; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #ccc; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #ccc; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #ccc; 
} 
  • 目标伪类选择器 :target 很酷!!!

用来匹配页面的URI中的某个标志符的目标元素。比如可以做到不通过js代码来实现tab切换。参考链接:http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target

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

推荐阅读更多精彩内容

  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,762评论 0 6
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,465评论 32 459
  • 背景颜色 如何设置标签的背景颜色在 css 中有一个 background-color: 属性,就是专门用来设置标...
    GodlinE阅读 186评论 0 1
  • 学会倾听,真的很重要。 我忽然想到《士兵突击》里,吴哲在点评会上跟袁朗说的一句话:“我以为我长于辩论,没想到你比我...
    史妍阅读 231评论 0 0
  • 家乡的八月,是怡静而淳朴的,而对于一年前的那个八月,于我,却是带着忧伤和眼泪的。就在农历中元节的那天中午,陪伴了...
    橙乐天阅读 446评论 0 4