1.写页面 2.css的继承属性有哪些 3.margin对布局的影响
1. sparent 透明的
2. placeholder 提示语
写页面
1.搞清结构层次
2. 保证模块化 让它们之间不能收到影响。
(1) 元素性质
(2)标准流
浮动带来的脱离文档流撑不起父级的高度的问题可以采用清楚浮动的方式消除影响。
absolute 和fixed 带来的脱离文档流撑不起父级高度,使用子元素设置高强制撑起父级。
1.css可以继承的属性哪些?
font系列 text系列 color line-height
2.border-radius 值的问题

四个值的顺序 左上 右上 右下 左下
3.white-space 规定段落中 的文本换不换行 往往值是nowrap 不换行
4.word-wrap 属性允许长时间的内容可以自动换行,属性值 break-word 允许 默认是不允许
5.写三角形

宽高必须是0
6. margin 对布局的影响 双飞翼 圣杯布局
双飞翼布局 中间固定两端auto
圣杯布局 两端固定 中间auto
margin-bottom 为负数后当前元素不动 后面元素向上走,nargin-right为负数当前元素不动后面元素向左走
注意的 margin为负数会增大当前元素的宽 (前提是当前元素没有设置width)
在float下
Margin为负 也是我们常用的双飞翼 圣杯布局
中间自适应 两端固定
给元素margin-left为负数当前元素像左走 margin-right为负数后一个元素向左走会覆盖当前元素
absolute 下
margin为负
让元素剧中,前提是知道元素的宽高
div{
Position:absolute;
Left:50%;
Top:50%;
Margin-left:-width/2;
Margin-top:-height/2
}
margin为负无论在什么条件下都是释放自己的空间,如果中间的margin不够 就把自己的宽高贡献出来。
1.写页面 2.css的继承属性有哪些 3.margin对布局的影响的更多相关文章
- css 可继承属性 display:inline-block 历史
1. css 可继承属性 1.1 font font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格fon ...
- Css盒模型属性详解(margin和padding)
Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...
- CSS外边距属性,深入理解margin
margin See the Pen margin by wmui (@wmui) on CodePen. 该属性用于设置元素的外边距,外边距是透明的,默认值0.这是一个简写属性,属性值最多为4个,例 ...
- css的继承之width属性(容易忽略)
众所周知,css的三大特性分别是 继承性,层叠性,和优先级. 那么这里就详细说一下css中width的继承性及其特殊情况. 继承性概念详解:css的继承性指的被包在内部的标签拥有外部标签的样式性,子元 ...
- css样式重叠、css样式继承、css 属性计算,,a元素下的文字颜色不能继承
1.属性的重叠 在渲染前浏览器将判断使用哪个样式 我们书写的样式会覆盖浏览器的自带样式 我们写的样式进行权重比较,规则如下 !import Infiniti无穷大 进制伪256行内样式 1000.id ...
- Html+css 练习写页面发现的错误及解决办法。
最近开始模仿写一些静态页面,今天模仿的是中华咨询网.写了一个简单的js(功能:当鼠标hover一级菜单的时候,设置二级菜单为显示,当鼠标hover二级菜单的选项时候,二级菜单不收回.当鼠标移出菜单一级 ...
- css常用的可继承属性和不可继承属性
不可继承属性1.display2.text-decoration 添加文本样式3.list-style4.盒子模型属性(如padding系列,border系列,margin等,width,height ...
- CSS哪些样式属性可以继承
不可继承的:display.margin.border.padding.background.height.min-height.max- height.width.min-width.max-wid ...
- CSS的继承和使用方式
CSS的继承 css的继承指的是当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质. 在Css中有些属性不允许继承,例如,border属性没有继承性.多边框类的属性都没有继承 ,例如, ...
随机推荐
- 关于isNaN()函数的细节
根据<JavaScript高级程序设计>的解释,NaN,即非数值(Not a Number),用于表示一个本来要返回数值的操作数未返回数值的情况,例如5/0就会得到NaN. 而因为NaN的 ...
- Openvswitch手册(5): VLAN and Bonding
我们这一节来看Port 一般来说一个Port就是一个Interface,当然也有一个Port对应多个Interface的情况,成为Bond VLAN Configuration Port的一个重要的方 ...
- 谈谈一些有趣的CSS题目(十六)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 在Docker容器中搭建MXNet/Gluon开发环境
在这篇文章中没有直接使用MXNet官方提供的docker image,而是从一个干净的nvidia/cuda镜像开始,一步一步部署mxnet需要的相关软件环境,这样做是为了更加细致的了解mxnet的运 ...
- 两种经典电商CSS布局
圣杯布局和双飞翼布局! 两种布局功能相同,都是为了实现两端宽度固定,中间宽度自适应的三栏布局 圣杯布局: 三个区域都处于左浮动状态,并使main的宽度成父容器的100% 为两侧侧边栏添加负margin ...
- Redis安装和实际应用
上次介绍了Redis的来龙去脉以及相关一些情况,点击回顾<深入浅出Redis>,接下来我们再讲讲Redis的安装和实际应用. 一.Redis的安装 下载安装包,redis-3.2.9.ta ...
- 吴恩达机器学习笔记28-多类分类(Multiclass Classification)
当我们有不止两种分类时(也就是
- phpspreadsheet导出数据到Excel
之前我们使用PHP导出Excel数据时使用的是PHPExcel库,但是phpoffice已经官方宣布PHPExcel已经被废弃不在维护,推荐使用phpspreadsheet,如下图所示 我们可以通过c ...
- Python爬虫-萌妹子图片
最近发现一个可以看图的地方,一张张翻有点累,毕竟只有一只手(难道鼠标还能两只手翻?).能不能下到电脑上看呢,毕竟不用等网速,还可以预览多张,总之很方便,想怎么就怎么,是吧? 刚好这几天在学python ...
- Xamarin.Android ImageView 图片圆角显示
第一步:在 values 文件夹下新增 Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> & ...