CSS属性与布局 | CSS
/* 1.float属性 浮动 基本效果：跳出文档流，漂浮在body边界。 分栏效果：同级元素，同携带float元素实现分栏。 问题：子元素跳出文档流，会同时跳出所在父级元素的盒子。 解决1：为父级元素添加 {overflow:hidden} 原理1：将盒子溢出的"窗口"关上。 解决2：浮动父级元素。 原理2：在父级元素也加上float，会包裹浮动的子元素，同时在同级父元素添加clear:left，避免被提升到浮动元素旁边。 解决3：在父元素末尾添加非浮动元素。 原理3：通过:after来实现，添加伪类元素。.clearfix:after{clear:both;} clear:both可以清除左右浮动的子元素。 推荐使用第三种!!!!! 另外：没有父级元素通过添加clear:both来实现。 2.position属性 定位 属性值：static，relative，absolute，fixed 默认是：static 2.1 相对定位 relative 相对原来文档流中的位置，不影响其他元素的位置。 通过top，right，bottom，left属性来改变它的位置。 2.2 绝对定位 absolute 将元素彻底从文档流中拿出来，根据默认顶级元素body定位上下文。 附：可以修改默认body上下文，在父级元素中添加relative属性值，就会以父级元素为上下文。 2.3 固定定位 fixed 将元素彻底从文档流中拿出来，根据浏览器窗口定位上下文(不随页面滚动)。 # 事实上，只要设置好元素的外边距和内边距，多数情况下静态定位足以实现页面布局了，position其他属性不好控制。 3.display 显示属性 none 该元素占据的空间会被回收。 6.字体/文本 字体： font-family 字体族 font-size 字体大小 绝对字体大小：像素 相对字体大小：%，em font-style 字体样式 font-weight 字体粗细 font-variant 字体变化 文本： test-indent 缩进 letter-spacing 字符间距 word-spacing 单词间距 text-decoration 文本修饰 test-align 文本对齐 left，right，center，justify lin-height 行高 test-transform 文本转换(大小写) vertical-align 垂直对齐 sub，super，top，middle，bottom # 想垂直方向上对齐块元素，必须把display设为inline。 */
*******************************************************************************************************************
CSS布局: 1.display属性 每个元素都有一个默认的display值，包括block,inline,inline-block 块元素，行内元素，行内块元素 块元素： div是标准的块元素，会尽可能撑满容器，还包括p/form/haeder/footer等 行内元素： span是标准的行内元素，包裹文字不打乱布局，还包括a元素等 none: 不删除元素的情况下隐藏或显示元素，但是不占据空间：script visibility属性会占据空间，visibility:hidden inline-block: 将li元素修改成inline，制作水平菜单 2.max_width替代width更好处理浏览器小窗口情况 #main{ max_width: 600px; margin:0 auto; } 3.盒模型 box-sizing: 元素内边距和边框不会增加其宽度 -webkit-box-sizing: border-box; -moz-box-sizing:border-box; box-sizing:border-box; 4.position static 默认，不被定位 relative 相对定位， fixed 固定定位，相对于浏览器窗口,脱离文档流。 absolute 相对用户定位的祖先元素，如果没有则相对于文档body元素，随页面滚动移动。 5.float：实现文字环绕 控制浮动：在相邻元素设置clear:left;或者right、both .after-box{ clear:left; } 清除浮动：相邻元素高度因为太高溢出容器，使用overflow来设置溢出元素 .clearfix{ overflow: auto; zoom: 1; # 想支持IE6的话 } 例子：定位、浮动、inline-block/浮动实现网格布局(vertical-align属性会影响到inline-block，设置成top)CSS布局概要
优质内容筛选与推荐>>
/* 1.属性 1.1 定位 position static (top/right/bottom/left属性不会被应用) relative 参照自身在流中的位置，通过top/right/bottom/left偏移，不影响其他元素。 absolute 参照最近的祖先元素，没有祖先元素则根据body，不影响其他元素。 fixed 参照窗口。 z-index 用于position非static的元素，表示上下文层叠级别，级别大的位于上方(auto层叠级别为0)。 top=-bottom,left=-right 1.2 布局 display none 隐藏对象，与hidden不同，不保留物理空间。 inline 内联元素 block 块元素 list-item 列表项目 inline-block 内联块元素 table 块元素表格 inline-table 内联元素表格 table-caption 表格标题 table-cell 表格单元格 table-row 表格行 table-column 表格列 table-column-group 表格列组 table-header-group 表格标题组 table-footer-group 表格脚注组 float 在absolute/display:none时不生效，相对浮动 none left right clear 清除浮动对象 none both left right visibility visible hidden collapse 隐藏表格列/行，对其他元素等同hidden overflow/overflow-x/overflow-y 针对溢出容器内容 visible 不做处理，可见 hidden 溢出部分隐藏 scroll 溢出部分通过滚动条展示 auto 按需出现滚动条 1.3 尺寸 width/height min-width/min-height max-width/max-height 1.4 外边距 margin(top/right/bottom/left) 1.5 内边距 padding(top/right/bottom/left) 1.6 边框 border(top/right/bottom/left) border: width style color border-style(top/right/bottom/left) none hidden dotted 点状轮廓 dashed 虚线轮廓 solid 实线轮廓 double 双线轮廓 groove 3D凹槽轮廓 ridge 3D凸槽轮廓 inset 3D凹边轮廓 outset 3D凸边轮廓 border-color(top/right/bottom/left) border-width(top/right/bottom/left) medium 3px, thin 1px, thick 5px border-radius(border-top-left-radius...) 角弧度 水平半径与垂直半径不同用"/"区分 20px/30px box-shadow 盒阴影，inset表示内阴影，默认为外阴影。 .test.inset{ box-shadow: 2px 2px 2px 2px rgba(0,0,0,0) inset; } 1.7 背景 background background-color background-image background-repeat background-attachment 设置背景图片随对象内容滚动还是固定。 background-position 设置背景图像位置 .test{ background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg); background-repeat:no-repeat,no-repeat,no-repeat; background-attachment:scroll,scroll,scroll; background-position:10px 20px,10px 20px,10px 20px; } 1.8 颜色 color opacity 背景不透明度 div{ filter:alpha(opacity=50); IE8前 opacity:.5; IE9后 } 1.9 字体 font-style 指定文本字体样式。 font-variant 指定文本是否为小型的大写字母。 font-weight 指定文本字体的粗细。 font-size 指定文本字体尺寸。 line-height： 指定文本字体的行高。 font-family： 指定文本使用某个字体或字体序列。 1.10 文本 text-align 水平对齐 text-transform 文字大小写 verical-align 垂直对齐 line-height 行高 1.11 列表 list-style-type 重置列表符号 .test{list-style-image:url(skin/ico.png);} list-style-position 设置或检索作为对象的列表项标记如何根据文本排列。 outside 标记在文本以外，文本与标记不对齐。 inside 标记在文本以内，文本与标记对齐。 list-style-image 设置或检索作为对象的列表项标记的图像 disc： 实心圆(CSS1) circle： 空心圆(CSS1) square： 实心方块(CSS1) decimal： 阿拉伯数字(CSS1) lower-roman： 小写罗马数字(CSS1) upper-roman： 大写罗马数字(CSS1) lower-alpha： 小写英文字母(CSS1) upper-alpha： 大写英文字母(CSS1) none： 不使用项目符号(CSS1) armenian： 传统的亚美尼亚数字(CSS2) cjk-ideographic： 浅白的表意数字(CSS2) georgian： 传统的乔治数字(CSS2) lower-greek： 基本的希腊小写字母(CSS2) hebrew： 传统的希伯莱数字(CSS2) hiragana： 日文平假名字符(CSS2) hiragana-iroha： 日文平假名序号(CSS2) katakana： 日文片假名字符(CSS2) katakana-iroha： 日文片假名序号(CSS2) lower-latin： 小写拉丁字母(CSS2) upper-latin： 大写拉丁字母(CSS2) */
1、爬虫：爬取图片并保存在某路径下
2、“逻辑”的古希腊词源
3、python 微信机器人
4、模板 - 强连通分量 - Kosaraju
5、基于bs4库的HTML查找方法