网站制作公司dedecms,建工网招聘,重庆seo是什么,wordpress的留言功能1、高度和宽度
.c1{height: 300px;width: 500px;
}注意事项#xff1a;
宽度#xff0c;支持百分比行内标签#xff0c;默认无效块级标签#xff0c;默认有效#xff08;即使右侧空白#xff0c;也不给你占用#xff09;
块级和行内标签 css样式 标签#xff1a; di…1、高度和宽度
.c1{height: 300px;width: 500px;
}注意事项
宽度支持百分比行内标签默认无效块级标签默认有效即使右侧空白也不给你占用
块级和行内标签 css样式 标签 display: inline-block 加上这个标签后行内标签具有了块级标签的特性可以设置宽高了
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyleinput[typetext]{border: 1px solid red;}.c1{display: inline-block;height: 100px;width: 300px;border: 2px solid red;}/style
/head
bodyspan classc1安娜/spanspan classc1安娜/span
/body
/html块级和行内标签的转换
span styledisplay: block;安娜/span
div styledisplay: inline;安娜/div使用这个标签后行内标签具有块级标签的特性块级标签的属性具有行内标签的属性
2、字体设置
颜色 出来可以使用英文还可以使用rgb值如#00FF7F大小加粗字体格式
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle.c1{color: red;font-size: 58px;font-weight: 400;font-family: Microsoft Yahei;}/style
/head
bodydiv classc1安娜/divdiv styledisplay: inline;安娜/div
/body
/html3、字体对齐方式
text-align: center 水平方向居中
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle.c1{color: #00FF7F;height: 100px;width: 300px;border: 2px solid red;text-align: center;}/style
/head
bodydiv classc1安娜/divdiv styledisplay: inline;安娜/div
/body
/htmlline-height:100px 垂直方向居中指定高度
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle.c1{color: #00FF7F;height: 100px;width: 300px;border: 2px solid red;text-align: center;line-height:100px;}/style
/head
bodydiv classc1安娜/divdiv styledisplay: inline;安娜/div
/body
/html4、浮动
本来span标签两个是挨在一起的使用向右浮动就会一个显示在左边一个在右边
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodyspan安娜/spanspan stylefloat:right伏伦斯基/span
/body
/htmldiv 默认是块级标签如果浮动起来了就不一样了。
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle.c1{float: left;height: 100px;width: 300px;border: 2px solid red;}/style
/head
bodydivdiv classc1/divdiv classc1/divdiv classc1/divdiv classc1/div/div
/body
/html浮动起来后自己有多宽就占多宽。 如果让标签浮动起来后就会脱离文档流。会使得父级div的样式无法显示需要加上 bodydiv stylebackground-color: bluediv classc1/divdiv classc1/divdiv classc1/divdiv classc1/divdiv styleclear: both;/div/div
/body
5、内边距
距离自己标签内部的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/titlestyle.outer{height: 300px;width: 300px;border: 2px solid red;padding-top: 20px;padding-left: 20px;}/style
/head
bodydiv classouterdiv你的眼里都是光/divdiv真是那样吗/div/div
/body
/html如果是上下左右的内边距都是20px ,可以按下面的方法写 padding: 20px;按上右下左的顺时针方向的内边距大小
padding: 40px 30px 20px 10px;6、外边距
当前标签与其他标签的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodydiv stylebackground-color:red; height:100px你的眼里都是光/divdiv styleborder: 2px solid blue; margin-top:30px真是那样吗/div
/body
/html7、其他注意点
body标签默认有一个边距造成页面四边都有白色间隙如何去除呢?
body {margin: 0
}内容居中 文本居中文本会在这个区域中居中。
div stylewidth: 200px; text-align: center;安娜/div区域居中自己要有宽度 margin- left:auto;margin-right:auto
. container {width: 980px;margin: 0 auto;
}
div class container adfasdf/div
