分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

CSS高级要点笔记

发布时间:2023-09-06 01:28责任编辑:熊小新关键词:CSS

CSS高级

*对齐块元素

对于块元素内部内容的水平对齐可以使用text-align:center;

而对于块元素本身在布局中的对齐可以使用margin属性,可以通过将左右外边距设置为auto来水平对齐.

<!DOCTYPE html><html><head><style>.center{margin:auto;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div><p><b>注释:</b>除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p></body></html>

需要注意的是:除非已经声明了!DOCTYPE,否则在IE8及更早版本中margin:auto是无效的。

此外还可以通过position属性来进行设置左对齐和右对齐。

<!DOCTYPE html><html><head><style>.center{position:absolute;right:0;width:70%;background-color:#b0e0e6;}</style></head><body><div class="center"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>

还可以使用float进行设置:

<!DOCTYPE html><html><head><style>.right{float:right;width:300px;background-color:#b0e0e6;}</style></head><body><div class="right"><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p></div></body></html>

CSS高级要点笔记

原文地址:http://www.cnblogs.com/tsembrace/p/7954543.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved