HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

１标签包含规范

◆div可以包含所有的标签。

◆p标签不能包含div h1等标签。

◆h1可以包含p，div等标签。

◆行内元素尽量包含行内元素，行内元素不要包含块元素。

2 规避脱标流

◆尽量使用标准流。

◆标准流解决不了的使用浮动。

◆浮动解决不了的使用定位。

使得绿色盒子跑到右边

    <style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right;}</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

    <style type="text/css">.father{width:500px;height:500px;background:red;}.son{width:100px;height:100px;background:green;float:right;       }</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>

         .son{width:100px;height:100px;background:green;margin-left:auto;}

设置盒子左外边距为auto，将盒子往右边冲

margin:0 auto ; 盒子左右边一直冲，居中

3 图片和文字垂直居中对齐

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

4 Css可见性

visibility:hidden; 隐藏元素隐藏之后还占据原来的位置。

    <style type="text/css">.red{width: 300px;height: 300px;background:red;visibility:hidden;}.green{width: 300px;height: 300px;background:green;}</style>
</head>
<body><div class="red"></div><div class="green"></div>
</body>

display:none; 隐藏元素隐藏之后不占据原来的位置

转载于:https://www.cnblogs.com/yimian/p/6681844.html

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，相关推荐

CSS——规避脱标流和vertical-align
规避脱标流: 1.尽量使用标准流. 2.标准流解决不了的使用浮动. 3.浮动解决不了的使用定位. 问题解决:嵌套盒子在不使用定位的情况下定位到右上角 <!DOCTYPE html> < ...
李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素作 ...
【CSS】CSS 规避脱标之两种用法
原文链接:https://www.cnblogs.com/xiaoqiang001/p/4726910.html 我们知道我们网页布局有三模式. 普通流 normal flow (标准流.常规流 ...
bootstarp span标签文本居中_web前端入门到实战：文本图标对齐的几种解决方案
常见的对齐问题: 浏览器是基于什么对齐图标和文本的? 为什么明明使用了 flex或vertical-align,图标还是看起来差了 1 像素没对齐? 文字图标布局开发中遇见图片跟文字放在一行显示是最 ...
css 定位脱标,CSS 定位
文章目录定位( postion) 简介静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 四种定位总结叠放次序(z-index) 居中布 ...
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范
转载--让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范让搜索引擎优化(SEO)更有效 CSS+DIV标签命名规范搜索引擎优化(seo)有很多工作要做,其中对代码的优化是一个很关键的步骤 ...
php标签嵌入规范,HTML标签嵌套的详细规则
这次给大家带来HTML标签嵌套的详细规则,HTML标签嵌套的注意事项有哪些,下面就是实战案例,一起来看一下. 最近在重新学习HTML的知识,算是对HTML的一个重新认识吧!别小看了这东西,一切的网页可 ...
html页面包含头文件,Web前端技术：HTML部分---Head标签中包含的头文件标签，body标签包含的内部标签...
1.Head标签中包含的头文件标签的作用: (1)title标签:定义网页的标题. (2)meta标签:一般用于定义页面的特殊信息,例如页面的关键字.页面描述等 (3)link标签:用于引入外部样式 ...
将字符串中的html标签编译,将字符串中的HTML标签包含的内容移除
public static string DeleteHTML(string Htmlstring)//将字符串中的HTML标签包含的内容移除 { #region //删除js脚本 Htmlstrin ...

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

１标签包含规范

2 规避脱标流

3 图片和文字垂直居中对齐

4 Css可见性

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，相关推荐

最新文章

热门文章

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，

１ 标签包含规范

2 规避脱标流

3 图片和文字垂直居中对齐

4 Css可见性

HTML 标签包含规范，规避脱标流，图片和文字垂直居中对齐，相关推荐

最新文章

热门文章

１标签包含规范