《Python web开发》笔记 三: CSS基础

CSS常用选择器

  • 通配符选择器 *
  • id选择器(id #)
  • 类选择器(class .)
  • 元素选择器(E)
  • 后代选择器(E F)
  • 子元素选择器(E>F)
  • 相邻兄弟元素选择器(E+F)
  • 群组选择器(selector1,selector2,...,selectorN)
  • nth选择器:
    fist-child: 选择某个元素的第一个子元素
    last-child: 选择某个元素的最后一个子元素

选择器权重

根据样式所在位置:!improtant > 内联样式 > style标签 > link标签。
计算方式:

一个行内样式+1000,一个id+100,一个属性选择器/class或者伪类+10,一个元素名,或者伪元素+1。其他规则见拓展阅读。

盒模型

盒模型

box-sizing:border-box:此时元素的内边距和边框不再会增加它的宽度,更便于理解和计算。

CSS常用属性:

- 背景:
background-color:#9cbfcc;
background-repeat: repeat;
background:url('images/grass.png');
background-size: contain;(完全限制的设定的大小内部)
- 方位:
padding: 0 20px 30px 0 (上 右 下 左)
margin-right: 10px;
text-align:left;
display:block;(in-line,inline-block)
- 字体:
font-family: 字体
font-size: 大小
- 边框:
border-radius: 圆角半径设置
border: solid 8px rgb(210, 157, 65);  样式,粗细,颜色

定位技术

relative(相对定位)

设置了相对定位之后,通过修改top,left,bottom,right值,元素会在自身文档流所在位置上被移动,其他的元素则不会调整位置来弥补它偏离后剩下的空隙。

absolute(绝对定位):

设置了绝对定位之后,元素脱离文档流,其他的元素会调整位置来弥补它偏离后剩下的空隙。元素偏移是相对于是它最近的设置了定位属性(position为relative或者absolute,值不为static)的元素。

fixed(固定定位):

设置了固定定位之后,元素相对的偏移的参考是可视窗口,即使页面滚动,元素仍然会在固定位置。
重心修改:
transform: translate(-50%,-50%),坐标原点从左上角改到了中心位置。

拓展阅读

备注

该笔记源自网易微专业《Python web开发》1.4、1.5、1.6、1.7节
本文由EverFighting创作,采用 知识共享署名 3.0 中国大陆许可协议进行许可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,854评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,270评论 0 1
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 1,905评论 0 6
  • 老郑的七彩童话系列妞妈已经记不得是在哪年买的了,只是印象里妞看过这套中的几本,前阵子妞又翻起老郑的书,用如饥似渴这...
    萍萍淡淡阅读 543评论 0 1
  • 张学友的演唱会,是我这一生几十件要完成的其中一件事。 自己想要的生活,要自己争取。 ...
    安大大大大大大阅读 127评论 0 0