常用的CSS（收集）

1. 防padding属性改变盒子模型宽度

Css代码

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

当前css将固定盒子模型宽度总是以(显示)指定的宽度(width:300px)为准, 并不会受到padding而强制改变和模型宽度.

2. 文字包围图片

Java代码

img {
float: right;
margin: 2px;
}

在相同和模型中, 将图片浮动而文字内容不浮动时, 将形成文字包围图片的效果.

Note: 因float已脱离流式布局, 为防止图片溢出和模型, 即需要在和模型中使用样式 -- overflow:aotu;

3. 使用inline-block实现栅格化布局

Css代码

.layout-box {
display: inline-block;
width: 200px;
height: 100px;
margin: 2px;
}

如果使用 display:block; float:left; 则需要小心当前和模型容器的高度是否会影响到后面的布局, 而使用inline-block则无需担心, 它会将盒模型撑开.

4. 将文字内容分列显示, column

当屏幕过宽且文字内容较多时, 你是否常常很难找到正在阅读的内容, 下一行的开始位置呢? 以下css会将文字内容分为三列显示

Css代码

.three-column {
padding: 1em;
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 16px;
}

Note: 查看column兼容性说明

3. CSS设定旋转功能

Css代码

.rotate .item:hover {
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
}

=====仅供参考，会有后续更新=======

转载于:https://www.cnblogs.com/xm1-ybtk/p/5112011.html

常用的CSS（收集）相关推荐

web标准化设计：常用的CSS命名规则
常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
第60天：js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
常用的CSS命名规则
网页设计中常用的CSS命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wra ...
常用的CSS属性的英文单词总结及用法、解释
1.(盒子)布局排版类 - TOP float - 浮动:设置块元素的浮动效果.可选常用到参数left.right : width - 宽:确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少 ...
【CSS练习】常用的CSS字段
常用的CSS字段 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. 注意,CSS 的选择器区分大小写,因此要谨慎使用大写. CSS 早已被所有主流 ...
css默认的font-size是什么意思,常用的css属性：font-size等
原标题:常用的css属性:font-size等今天给大家介绍一些常用的css属性: 1 font-size:用于设置字体大小 font-size:20px; font-size:150% 2 fon ...
[转]常用的CSS命名规则
(壹)常用的CSS命名规则头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrappe ...
常用的CSS属性列表汇总
常用的CSS属性列表汇总近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下. 表格最右列的数字标识支持的CSS最低版本. 01. CSS背景属性(Background) 属 ...
花指令的原理和常用花指令收集
花指令的原理和常用花指令收集花指令的作用是对付静态分析,以下面一段程序说明一下花指令的原理代码 #include < iostream.h > #include < wind ...

常用的CSS（收集）

常用的CSS（收集）相关推荐

最新文章

热门文章