边框圆角值的问题、white-space、word-wrap、margin对布局的影响
1、边框圆角(border-radius)值的问题
border-radius : 7px 7px 7px 0;
四个值的顺序是左上、右上、右下、左下
2、white-space 规定段落中的文本不换行,往往值是弄wrap
3、word-wrap 属性允许长的内容可以自动换行,属性值是break-word 允许 默认不允许
4、margin对布局的影响
margin是外边距 属性值是数字,数字也分正负
正数:margin:20px;
负数:在static(元素)中(标准流下)
margin-left 为负数当前元素向左走
margin-top为负数当前元素向上走
margin-bottom为负数当前元素不动,后面的元素向上走
margin-right为负数当前元素不动,后面的元素向左走
*注:margin为负数会增大当前元素的宽,(前提是当前元素没有设置width)
在float下,margin为负,也就是我们常用的双飞翼 圣杯布局
在absolute下,margin为负,让元素居中,前提是知道元素的高度
margin为负数,无论什么条件都是释放自己的空间,如果自己的margin不够就把自己的宽度贡献出去
边框圆角值的问题、white-space、word-wrap、margin对布局的影响的更多相关文章
- CSS3: border-radius边框圆角详解
border-radius 基本语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ]? 取值范围: <l ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- css3(border-radius)边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
- 使用css3来实现边框圆角效果
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然borde ...
- CSS的display、hover、overflow、©(版权符号)、borer-radius(边框圆角)
一.display: none 隐藏 block显示 visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- CSS border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 边框 圆角 背景
CSS3用于控制网页的样式布局. CSS3是最新的CSS标准. 关于transform: transform:rotate(10deg);//顺时针方向旋转10° 浏览器支持情况:低版本的IE浏览 ...
随机推荐
- 如何使用git 生成patch 和打入patch【转】
本文转载自:http://blog.csdn.net/liuhaomatou/article/details/54410361 平时我们在使用git 管理项目的时候,会遇到这样一种情况,那就是客户使用 ...
- HDU4763 Theme Section —— KMP next数组
题目链接:https://vjudge.net/problem/HDU-4763 Theme Section Time Limit: 2000/1000 MS (Java/Others) Mem ...
- FZU1686 神龙的难题 —— Dancing Links 可重复覆盖
题目链接:https://vjudge.net/problem/FZU-1686 Problem 1686 神龙的难题 Accept: 812 Submit: 2394 Time Limit: ...
- 一步一步学Silverlight 2系列(9):使用控件模板
述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- UVA-10391(字符串检索)
题意: 给定一个字典,要求找出所有的复合词; 思路: 用map把词都存起来,再把词拆开看是否是出现过的单词; AC代码: #include <bits/stdc++.h> #include ...
- Java中的ArrayList
ArrayList是所谓的动态数组.用一个小例子: import java.util.ArrayList; import java.util.Iterator; import java.util.Li ...
- BZOJ3355
3355: [Usaco2004 Jan]有序奶牛 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 37 Solved: 19[Submit][Sta ...
- 棋盘问题(dp)
棋盘问题 传送门 题目描述 在一个给定形状的棋盘(形状可能是不规则的)上面摆放棋子,棋子没有区别.要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列,请编程求解对于给定形状和大小的棋盘,摆放k个 ...
- Code-NFine:jqgrid 数据绑定
ylbtech-Code-NFine:jqgrid 数据绑定 1. jqgrid 基本列展示返回顶部 1. 1.1..cshtml $(function () { gridList(); }) fun ...
- Windows下如何生成数字证书
1.Makecert.exe<证书创建工具>使用说明:http://msdn.microsoft.com/zh-cn/library/bfsktky3.aspx 2.SignTool.ex ...