day46_9_5前端(3)

一。调节长宽。

在css中可以对块级标签设置长和宽,但是对行内标签无效,其属性如下:

1.height:80px 高度。

2.width:80px 宽度。

![]()

二。字体属性。

设置一个标签中的字体。比如黑体什么的。还有文字大小等,是字体本身的属性。

1.font-family :字体格式。

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。

2.font-size:字体大小。

3.font-weight:字体重度。

normal 默认值,标准粗细

bold 粗体

bolder 更粗

lighter 更细

100-900 自主调节

inherit 继承父元素字体的粗细值

4.color:字体颜色。

1.直接使用颜色。

2.使用#404040代码。

3.使用rgb(12,12,12)

4.使用rgbc(12,12,12,1.0) 最后一个值是调节字体颜色的透明度,不能调文本

三。文字属性。

调节文字整体的位置等属性。

1.text-indent 20px 调节字节首行缩进的值。

2.text-align:(center,left,right,justify(两端对齐))

3.text-decoration 用来为文字添加特殊效果。

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

其中,text-decoration可以用来去掉链接下的下划线。

四。背景属性。

设置颜色或者图片做为背景。

background-color:black 设置背景为黑。

background-image:url(地址),设置一个图片作为背景。默认重复。

background-repeat :no-repeat.设置图片不重复。

repeat-x x轴重复

repeat-y y轴重复。

background-postion :center 背景位置居中。

left right 向左向右

background-postion:10px 10px 第一个参数调节的是左右,第二个调节的是上下。

可并行设置:

background: orange url("111.png") no-repeat center center;

background-attachment: fixed 将背景设置为固定位置,滑动块时上下不会动。

六。边框:

边框就是一个标签的变宽,可以对其设置粗细,样式和颜色,可以一起设置。

border-width 宽度

border-style 样式

border-color 颜色

可以一起写:

#i1 {
  border: 2px solid red;
}  

边框样式:

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

也可以单独为某一个边框设置一个样式:

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

这个属性值可以实现圆角边框的效果。

设置成50%可以画圆。

display的属性

意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

block设置为块级标签。

inline设置为行内标签

block+inline同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别:

visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

七。盒子。

对于一个块级标签,有盒子定义,就是有外边距,边,内边距和内容的定义。

![]()

margin的用法:

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

也可以简写。顺序时上右下左。

.margin-test {
  margin: 5px 10px 15px 20px;
}

居中法:

.mycenter {
  margin: 0 auto;
}

这个方法只能左右居中,不能上下居中。

padding的用法:

与margin相似:

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写也是上右下左的顺序:

.padding-test {
  padding: 5px 10px 15px 20px;
}

提供三个值时显示的是上 左右 下。

八。浮动

设置浮动的元素会变成一个块级框,无论他是何种元素。

浮动的两个特点:

1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

浮动框的三种取值。float

left:向左浮动。

right:向右浮动。

none:不浮动。

clear清除浮动。

由于浮动会出现像元素在div中消失了一样的现象,所以其div会受其影响。clear可以不允许浮动在其周围。

如果在就换一行。

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

clear只对资深其作用,而不会影响其他元素。

清除浮动可能会使得父标签坍塌,有一种方法使得浮动的影响消失:

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

就是永远在自身的内部设置一个空元素,该元素左右都不得浮动,所以会使得div一致保持。

九。溢出属性的处理

当一个div的内容溢出时,需要设置overflow对其处理。

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

1.overflow(水平和垂直均设置)

2。overflow-x(设置水平方向)

3。overflow-y(设置垂直方向)

十。定位。

在div中,有三个定位方式。

正常的 是static静态,就是没有任何定位方式。使用left和top是没有用的。

1。relative相对定位。

就是相对于该元素原来的位置定位。该定位并没有脱离正常文档流,而且有top,right,bottom,left等方法。其层次通过z-index定位。

2.absolut绝对定位。

不在原文档流中,重新生成新的块级框。

重点:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。

3.fiexd固定定位。

fixed:对象脱离正常文档流,使用top,right,bottom,left等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点: 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点,因为这是两个不同的流,一个是浮动流,另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

在理论上,被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标,不论窗口是否滚动,它都会固定在这个位置。

总结:

脱离文档流:

绝对定位。

固定定位。

不脱离文档流。

相对定位。

除了相对定位(因为还在正常流中),其他定位的元素都不能设置浮动

十一。z-index

z-index设置元素显示的先后。只有设置了定位的元素才能有z-index。浮动元素不能使用z-index。

十二。opacity

用来定义透明效果。取值范围是0-1,0是完全透明,1是不透明,

与字体不一样的是,他是真的透明,字体颜色只是对于颜色的透明。

补充:
使用list-style-type:none;可以使得ul标签的前面无点

设置边框阴影:box-shadow

向 div 元素添加 <br></br>box-shadowbox-shadow: h-shadow v-shadow blur spread color inset;<br></br>div{box-shadow: 10px 10px 5px #888888;}<br></br>10px 10px 表示水平阴影的位置和垂直阴影的位置 5px是阴影的宽度  <br></br>10px 10px 的值为正值时表示的盒子的下方和右方<br></br>如果是-10px -10px表示的就是盒子的上方和左侧右阴影<br></br> 以上情况都是盒子的阴影是outset外部阴影为默认样式<br></br>div{box-shadow:  inset 10px 10px 5px #888888;}<br></br>当在阴影属性中设置为inset时,10px 10px<br></br>表示的就是内部上方和左侧,-10px -10px为下方和右侧
<br></br>

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。