随笔分类 -  CSS

CSS--文本溢出与换行
摘要：当我们设置我的的div，或者其它文本框固定宽度之后，文本内容过多就会出文本溢出（显示在区域外面，不换行的情况）。 这时我们可以使用Css中的几个属性来解。 有以下的三个属于可以解决问题： 1，word-break 属性规定自动换行的处理方法。 word-break: normal|break-all 阅读全文
posted @ 2020-12-05 11:56 盲仔不瞎忙 阅读(918) 评论(0) 推荐(0)
css--滤镜filter
摘要：Filter： 滤 镜 名 说 明 滤 镜 名 说 明 Alpha 设置透明度 Blur 设置模糊效果 Chroma 设置指定颜色透明 Dropshadow 设置投射阴影 Fliph 水平翻转 Flipv 垂直翻转 Glow 对象的外边界增加光效 Grayscale 设置灰度(降低图片的色彩度) I 阅读全文
posted @ 2020-12-05 11:51 盲仔不瞎忙 阅读(510) 评论(0) 推荐(0)
css--flex布局
摘要：原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flexbox通常能让我们更好的操作他的子元素布局，例如： 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行； 可以快速让他们布局在一列； 可以方 阅读全文
posted @ 2020-12-05 11:13 盲仔不瞎忙 阅读(159) 评论(0) 推荐(0)
css--table布局
摘要：display：table布局 单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等. table表格中的单元格最大的特点之一就是同一行列表元素都等高。 display:table-cell下的列表布局最适用的场景是：列表个数不固定，但是，无论列表几个，都平分容器空间。什么意思呢？就是如果 阅读全文
posted @ 2020-12-05 11:07 盲仔不瞎忙 阅读(1012) 评论(0) 推荐(0)
css--响应式网格布局
摘要：百度前端技术学院 任务八：响应式网格（栅格化）布局 使用 HTML 与 CSS 实现类似 BootStrap 的响应式 12 栏网格布局，根据屏幕宽度，元素占的栏数不同。 示例代码 DOM结构： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> 阅读全文
posted @ 2020-12-05 10:56 盲仔不瞎忙 阅读(226) 评论(0) 推荐(0)
css--伪元素
摘要：一 基本语法 在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性： p:before {} 不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 阅读全文
posted @ 2020-12-05 10:26 盲仔不瞎忙 阅读(161) 评论(0) 推荐(0)
css--双飞翼布局
摘要：圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。 圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移 阅读全文
posted @ 2020-12-04 20:05 盲仔不瞎忙 阅读(139) 评论(0) 推荐(0)
css--圣杯布局
摘要：所谓的圣杯布局就是左右两边大小固定不变，中间宽度自适应。 DOM结构： <div class="header">Header</div> <div class="bd"> <div class="main">Main</div> <div class="left">Left</div> <div c 阅读全文
posted @ 2020-12-04 20:03 盲仔不瞎忙 阅读(165) 评论(0) 推荐(0)
css--字体
摘要：color：#000; font-size:12px/X%/Xem/large/small; font-weight:bolder//bold(700)/normal(400)/lighter; font-family:serif； font-style:normal/italic/oblique; 阅读全文
posted @ 2020-11-28 14:50 盲仔不瞎忙 阅读(95) 评论(0) 推荐(0)
css--图片自适应
摘要：我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面说明一下怎样去实现这样一个效果。 <div> <img src="1.jpg" alt=""> </div> 假设这里的图片大小为200x200px div { width: 400px; height: 400px; borde 阅读全文
posted @ 2020-11-28 14:48 盲仔不瞎忙 阅读(592) 评论(0) 推荐(0)
css--百分比
摘要：相对于父元素宽度的： [max/min-]width、left、right、padding、margin 等； 相对于父元素高度的： [max/min-]height、top、bottom 等； 相对于继承字号的： font-size 等； 相对于自身字号的： line-height 等； 相对于自 阅读全文
posted @ 2020-11-28 14:39 盲仔不瞎忙 阅读(85) 评论(0) 推荐(0)
css--绝对定位
摘要：其实绝对定位absolute的参照对象是“离它最近的已定位的祖先元素”。 这句话里有两个关键: 一个是“离它最近的祖先元素”，意思是那个参照元素不一定是父元素，也可以是它的爷爷、爷爷的爷爷等等，如果它的祖先里同时有2个及以上的定位元素，就参照离它最近的一个元素定位 另一个是“已定位”，这个定位也不一 阅读全文
posted @ 2020-11-28 14:36 盲仔不瞎忙 阅读(190) 评论(0) 推荐(0)
display:inline、block、inline-block
摘要：display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inli 阅读全文
posted @ 2017-10-23 11:24 盲仔不瞎忙 阅读(197) 评论(0) 推荐(0)
css--浮动
摘要：至于分列布局，个人常用的方法有以下几种： 1、如果是分两列布局，可以同时对两个盒子应用浮动来进行布局，可以设定左右两个盒子自己的宽度或者是宽度百分比。 2、同样是分两列布局，也可以对左边的盒子应用左浮动布局，对右边的盒子应用定位或者设置它的margin值来定位。 3、对于三列布局，最好采用浮动加定位 阅读全文
posted @ 2017-10-19 19:59 盲仔不瞎忙 阅读(122) 评论(0) 推荐(0)
水平居中和垂直居中
摘要：水平居中方案 1.行内元素,可以设置text-align属性 text-align:center 2.固定宽度块状元素，可以设置左右margin值为auto来使用 margin:0 auto; 3.不定宽度块状元素 子元素设置 position:relative 和 left:50% 垂直居中方案 阅读全文
posted @ 2017-10-18 20:06 盲仔不瞎忙 阅读(321) 评论(0) 推荐(0)