博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css自问自答(一)
阅读量:4595 次
发布时间:2019-06-09

本文共 2157 字,大约阅读时间需要 7 分钟。

css自问自答(一)

1.块级元素和行内元素特性与区别?

块级:display:block

...

      1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。2.元素的高度、宽度、行高以及顶和底边距都可设置。3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致)

内联(行内):display:inline

内联块状:display:inline-block

1、和其他元素都在一行上;2、元素的高度、宽度、行高以及顶和底边距都可设置。同样存在内联元素之间有间距的问题

2.为文档添加样式的三种方法?

行内样式

嵌入样式链接样式

额外:在样式表中其他样式之前使用@import url(css/styles2.css)规则

3.浏览器层叠各个来源样式的顺序?

浏览器默认样式表用户样式表链接样式表(按照它们链接到页面的先后顺序)嵌入样式行内样式

特殊注意

p {color:green !important; font-size:12pt;}空格!important 分号(;)用于加重声明的权重。这条规则加重了将文本设置为绿色的权重。于是,就算层叠的下一来源给段落设定了其他颜色,最终的颜色值仍然还是绿色。

4.src和href使用区别?

Src是引入,使用时需要加载进来,而href是引用,建立一个到原文档的链接

5.name 属性和title 属性?

name 属性规定 input 元素的名称。name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据。title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本(tooltip text)。

提示:title 属性常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。

6.理解盒模型

三个属性

边框(border) 。可以设置边框的宽窄、样式和颜色。内边距(padding) 。可以设置盒子内容区与边框的间距。外边距(margin) 。可以设置盒子与相邻元素的间距。

相关的属性也各有 4 个

分别是上(top)、右(right)、下(bottom)、左(left)。语法:P {margin: top right bottom left; }P {padding: top right bottom left; }那个位置没写,就使用那个相对位置上的值

盒子边框

语法:{ border:border-width border-style border-color;}(1)全部3个属性,全部4条边{border:2px dashed red;}(2)1个属性,全部4条边{border-style:dashed;}(3)1个属性,1条边{border-left-style:dashed;}

外边距合并

外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并

盒子有多大

  • 盒模型结论一:
没有(就是没有设置 width 的)宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。
  • 盒模型结论二:
为设定了宽度的盒子添加边框、内边距和外边距,会导致盒子扩展得更宽。实际上,盒子的 width 属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度。

注意:CSS3 新增了一个box-sizing属性,通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为(box-sizing:border-box;)。

转载于:https://www.cnblogs.com/YeChing/p/6336770.html

你可能感兴趣的文章
clang: error: linker command failed with exit code 1 (use -v to see invocation) 无法定位的问题...
查看>>
HDU 4003 Find Metal Mineral(分组背包+树形DP)
查看>>
数据导出和TreeView
查看>>
UI图标不用愁:矢量字体图标Font-Awesome
查看>>
android事件传递机制以及onInterceptTouchEvent()和onTouchEvent()详解二之小秘与领导的故事...
查看>>
指针数组和数组指针的区别
查看>>
KNN和SVM的区别和联系
查看>>
JAVA的Random类 Java中的Random()函数
查看>>
判断手机横屏和竖屏方向
查看>>
动态闪字
查看>>
docker入门1---docker的简介和安装
查看>>
MyEclipse2017修改Web Context Root
查看>>
svn的使用总结
查看>>
ERP光有主生产计划不够 还得详细生产排程
查看>>
HTML5 2D平台游戏开发#2跳跃与二段跳
查看>>
【bzoj3238】【Ahoi2013】差异
查看>>
Spring源码:Spring IoC容器加载过程(1)
查看>>
Hive row_number() 等用法
查看>>
vue如何使用rules对表单字段进行校验
查看>>
ural 2032 Conspiracy Theory and Rebranding (数学水题)
查看>>