常州天宁区建设局网站,一分钟了解网络广告,随州有哪些网站建设的公司,广东品牌网站设计边距 padding (内边距): 钻戒到盒子内边框的距离 margin (外边距): 戒盒子距离桌子边缘的距离 border: 钻戒盒子边框宽度
举个例子#xff1a;一个钻戒就是div#xff0c;里面会有p和a的标签去做一个文字描述。内标签是p或者a标签到div边的一个距…边距 padding (内边距): 钻戒到盒子内边框的距离 margin (外边距): 戒盒子距离桌子边缘的距离 border: 钻戒盒子边框宽度
举个例子一个钻戒就是div里面会有p和a的标签去做一个文字描述。内标签是p或者a标签到div边的一个距离这叫做内边距是其内部的东西也就是子标签到内部的距离。
外边距就是到外部差了多少距离。
border其实就是div的边的宽度。
1) 内边距和外边距在做内边距和外边距大部分的情况是整体或者小范围的布局也好在对其方面的调整。比如在div里面有一张图片一段文字这个图片和文字需要对其那么需要使用内边距的属性让其对齐 内边距 外边距 使用方式: 上面灰色部分是divdiv里面有一张图片图片的边到四边的距离其实就是一个内边距div的边到外部的距离就是一个外边距灰色的边框就是border了。
.a {padding: 10px 5px 15px 20px; /*上右下左*/padding: 10px 5px 15px; /*上右下*/padding: 10px 5px; /*上右*/padding: 10px; /*四边都是10px*/padding-top: 10px; /*上*/
}
!DOCTYPE html
html
headmeta charsetUTF-8title首页/titlelink href typetext/css relstylesheet/style typetext/css.d1{padding: 100px;margin: 50px;border: 10px solid red;background-color: blue;}/style
/headbodydiv classd1a在html当中如何使用css样式/a/div div classd1a在html当中如何使用css样式222/a/div
/body/html 到border其实都是整个div在边框外面margin就是div之外的东西了就是外边距只有margin会影响div外部的布局。比如还有一个div那么就是排在这个div之后了。外边距会影响到它的一个排列布局里面是不影响的 字体 属性 CSS字体属性定义字体颜色、大小加粗文字样式。
color 颜色推荐使用16进制的方式因为可以模拟的颜色太多了。
font-size 设置字体大小 font-weight 设置字体粗细
标题标签是带有默认加粗的最常用的是数字从100-900。比400小的代表细的比400大的代表粗的。 font-style
定义字体样式可以是斜体也可以是正常。 fornt-famliy
字体样式是微软雅黑还是宋体。告诉你用什么样的字体进行显示平时用的最多的就是微软雅黑。 !DOCTYPE html
html
headmeta charsetUTF-8title首页/titlelink href typetext/css relstylesheet/style typetext/css.p1{font-size: 20px; }.p2{font-family: Verdana, Geneva, Tahoma, sans-serif;}.p3{font-weight: bold;}.p4{font-style: italic;}/style
/headbodyp classp1这是p1/pp classp2这是p2/pp classp3这是p3/pp classp4这是p4/p
/body/html 文本 属性 文本就是在页面上有一行文本这行文本可以通过文本属性来设置它。 上面就是首行缩进30px就是两个字体的缩进距离。可以看到html的一些属性被css完全替代了包括真正对其方式html的标签只需要关注其框架方面的样式全部统一维护在css里面。 有些时候在开发前端页面的时候后端会返回大量的文本内容这个时候需要去做一个美化不可能所有的都显示出来因为这会影响排版。这样值截取一部分剩下的做溢出效果。 !DOCTYPE html
html
head
meta charsetUTF-8
title文档的标题/title
style typetext/css.d{background-color: blue;}.p1 {color: rgb(85, 160, 100);}.p2 {text-align: center;}.p3 {text-decoration: underline;}.p4 {width: 50px;height: 50px;text-overflow: ellipsis;overflow: hidden; /*隐藏文本溢出的部分*/white-space: nowrap; /*强制在一行显示文本*/}.p5 {letter-spacing: 10px;}.p6 {line-height: 100px;}/style
/head
bodydiv classdp classp1这是P1/pp classp2这是P2/pp classp3这是P3/pp classp4This is some long text that will not fit in the box/pp classp5这是p5/pp classp6这是P6/p/div
/body
/html 边框 属性 !DOCTYPE html
html
headmeta charsetUTF-8title首页/titlelink href typetext/css relstylesheet/style typetext/cssdiv{width: 100px;height: 100px;margin-bottom: 10px;}.d1{border: 1px solid blue;}.d2{border-radius: 15px;border: 3px solid rebeccapurple; }/style
/headbodydiv classd1这是div1/divdiv classd2这是div2/divdiv classd3这是div3/div/body/html 背景 背景属性是给一个模块或者一个容器或者给一个内容它的背景设置颜色或者图片等等让其变的更加美观一些。 设置水平和垂直方式到底是否重复默认是重复的。可以设置不重复或者水平方向重复或者垂直方向重复。 size设置图片长度和宽度如果图片是小于整个div那么才会重复。
最常用的方式可以使用cover属性保证图片不被压缩但是充满整个容器。(它是竭尽全力去充满整个容器如果比例不相等多余出来的宽度和高度就看不到了它的目的就是充满容器会有切割的情况)
contain保证图片最大尽可能充满整个容器它不切割如果没有充满就没有充满。 .login{position: absolute;width: 100vw;height: 100vh;background-image: url(../../assets/img/bg.jpg);background-size: 100%;
}
background-color定义的是一个单一的背景颜色或者是给其一个背景图片。后面的三个属性全部都是基于背景图片来去配置的。用了背景图片才需要配置这三个。或者只设置背景图片就行了。
position设置图片渲染的位置默认图片是从容器的左上角进行渲染的现在使用的position可以规定图片渲染的位置如果是让水平和垂直都是为中那样就是center center。最常用的就是水平和垂直都居中。 !DOCTYPE html
html
headmeta charsetUTF-8title首页/titlelink href typetext/css relstylesheet/style typetext/cssdiv{width: 400px;height: 400px;margin-bottom: 10px;}.d1{background-image:url(https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxzZWFyY2h8Nnx8Zmxvd2VyfGVufDB8fDB8fA%3D%3Dautoformatfitcropw500q60);background-repeat: no-repeat;}.d2{background-image:url(https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlibrb-1.2.1ixidMnwxMjA3fDB8MHxzZWFyY2h8Nnx8Zmxvd2VyfGVufDB8fDB8fA%3D%3Dautoformatfitcropw500q60);background-position: top right;}/style
/headbodydiv classd1这是div1/divdiv classd2这是div2/divdiv classd3这是div3/div/body/html
