mr_minlong的专栏

文本换行的三个属性三属性分别为word-wrap、word-break、white-space.浏览器默认换行方式对于西文来说,以空格为间隔,每行容纳尽量多的单词,若整行无空格且超出浏览器显示边缘,则横向撑开浏览器边缘,并不换行对于中文来说,则不论是否有空格,无法撑开浏览器边缘,到浏览器边缘则自动换行接着我们来讨论word-wrapword-wrap: normal/break-word

边框相关属性box-shadow (边框阴影) h-shadow 水平阴影距离v-shadow 垂直阴影距离blur 可选,模糊距离spread 可选,阴影尺寸color 可选,颜色inset 可选,将当前阴影修改为内阴影box-shadow: h v blur spread color insetborder-image (图片边框) border-image-sourse 图

在实际开发中常常会有这样的场景：类似聊天或者提示这样的场景，此时文字框并非是一个完全矩形的框，而是在矩形框的某一侧还有一个小三角的突起。我们知道CSS盒模型都是矩形的，那我们怎么做出来这样的效果呢？先用CSS写一个三角出来<div class="tag"> <em></em> CSS气泡框实现</div><style> .tag{ width:300px;

今儿，我就准备向大伙儿介绍一些你们之前可能很少见过CSS家伙们。他们每个都是度量的单位，类似pixel 和 em 这样的，但是很有可能你之前从来就没听过这些家伙们！rem我们首先介绍下和我们熟悉的很相似的货。em 被定义为相对于当前对象内文本的字体大小。炒个栗子，如果你给body小哥设置了font-size字体大小，那么body小哥的任何子元素的1em就是等于body设置的font-size。 虽

水平居中利用display:table.box{ display:table; margin:0 auto;}利用display:flex.boxParent{ display:flex;}.box{ margin:auto;}水平竖直都居中已知元素的宽高.box{ position:absolution; left:50%; to

本文整理自阮一峰大神的博客，原文地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各

表格相关属性border-collapse 边框是否合并 separate 分离边框(默认)collapse 合并边框border-spacing 边框边距(border-collapse必须为separate才允许设置该属性) 一个值: 表示水平和垂直间距相等两个值: 第一个值表示水平间距,第二个值表示垂直间距,两个值以空格间隔caption-side 表格标

基础选择器相关通用选择器元素选择器类选择器 注意: 类名不能以数字开头分类选择器 如: div.waring{}id选择器群组选择器后代选择器子代选择器复杂选择器相关 兄弟选择器 相邻兄弟选择器 如div+p{}注意: 只找与当前元素相关的后面的一个紧挨着他的兄弟元素, 如何符合则匹配, 不符合也不会向下查找通用兄弟选择器 如div~p{}注意: 第二个元素不必紧

垂直对齐相关vertical-align 垂直对齐方式 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。在表单元格中, 这个属性会设置单元格框中的单元格内容的垂直对齐方式。针对行内块(img)元素, 可定义边上的文本与当前元素的对齐方式常见值 baseline 默认, 元素放置在父元素的基线上top 把元素的顶端与行中最高元素的顶端对齐text-top 把

过渡什么是过渡 元素从一个状态到另一个状态的平滑变换的过程过渡属性 元素的哪个属性发生变化时要使用过渡效果transition-property: none | all | property过渡时间 整个过渡效果在多长的时间内完成, 以s或ms为单位transition-duration: s | ms过渡时间默认为0, 此时无过渡效果, 若想看到过渡效果, 必须设置该属性过渡函

为什么要使用定位当需要修改元素出现的位置, 则需要使用定位定位分类浮动定位 float: left/right普通流定位 position: static (默认), 静态定位相对定位 position: relative绝对定位 position: absolute固定定位 position: fixed浮动定位什么是浮动定位 将元素摘离普通流,元素在页面中不占用

边距属性相关margin 外边距合并 当两个外边距相遇时,他们将形成一个外边距,称之为外边距合并。外边距的值,以大值为准A Problem 描述 内外嵌套的div元素,如果设置内层div的margin-top,默认会作用于外层div的margin-top上,而内层没有效果解决方案 外层元素添加边框外层元素添加padding-top外层元素设置display:table (推荐

变量变量的声明：$/^[A-Za-z_]+\w*/ : value变量类型：1. 数字（e.g. 2，3，10px）2. 有引号或者没有引号的文本字符（e.g. foo,"foo",'foo'）3. 色值（e.g. blue，#333，rgba(255,255,255,0.5)）4. 布尔型（e.g. true，false）5. 空（e.g. null）6. 列表值，用空格或逗号分隔（e