解析:
答:有三种方法。
方法 1: .div1{ width:400px; height:400px; border:#CCC 1px solid; background:#99f;
position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); } <div
class="div1"></div>
方法 2: .div2{ width:400px; height:400px; border:#CCC 1px solid; background:#99f;
position: absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } <div
class="div2"></div>
方法 3: .div3{ width:400px; height:400px; border:#CCC 1px solid; background:#9f9;
position: absolute; left: 50%; top:50%; margin-left:-200px; margin-top: -200px; } <div
class="div3"></div>
解析:
答:css3 加强了 css2 的功能,增加了新的属性和新的标签,并且删除了一些冗余的标
签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns 之类
的属性)。在效果方面加入了更多的效果(圆角,动画之类的),还有在盒子模型和列表模块
都进行了改进。不过 CSS3 兼容性不好,只有一些高级版本的浏览器支持。
解析:
(1) 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的条目进
行排列、对齐和分配空白空间。
即便容器中条目的尺寸未知或是动态变化的,弹性盒布局模型也能正常的工作。在该布
局模型中,容器会根据布局的需要,调整其中包含的条目的尺寸和顺序来最好地填充所有可
用的空间。
当容器的尺寸由于屏幕大小或窗口尺寸发生变化时,其中包含的条目也会被动态地调整。
比如当容器尺寸变大时,其中包含的条目会被拉伸以占满多余的空白空间;当容器尺寸变小
时,条目会被缩小以防止超出容器的范围。弹性盒布局是与方向无关的。
在传统的布局方式中,block 布局是把块在垂直方向从上到下依次排列的;
而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制,可以
由开发人员自由操作。
(2) flex 和 box的区别: display:box 是老规范,要兼顾古董机子就加上它; 父级元素有
display:box;属性之后。他的子元素里面加上 box-flex属性。可以让子元素按照父元素的宽度
进行一定比例的分占空间。 flex是最新的,董机老机子不支持的;
父元素设置 display:flex 后,子元素宽度会随父元素宽度的改变而改变,而 display:box
不会。 Android UC 浏览器只支持 display: box语法;而 iOS UC 浏览器则支持两种方式。
解析:
(1)width :设置 layout viewport 的宽度,为一个正整数,或字符串'device-width';
(2)initial-scale:设置页面的初始缩放值,为一个数字,可以带小数。
(3)minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数。
(4)maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数。
(5)height:设置 layout viewport 的高度,这个属性对我们并不重要,很少使用
(6)user-scalable:是否允许用户进行缩放,值为‘no’或者‘yes’。
安卓中还支持:target-densitydpi,表示目标设备的密度等级,作用是决定 css 中的 1px 代
表多少物理像素
(7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、
device-dpi 这几个字符串中的一个
解析:
所谓标签语义化,就是指标签的含义。语义化的主要目的就是让大家直观的认识标签
(markup)和属性(attribute)的用途和作用,对搜索引擎友好,有了良好的结构和语义我们的网
页内容便自然容易被搜索引擎抓取,这种符合搜索引擎收索规则的做法,网站的推广便可以
省下不少的功夫,而且可维护性更高,因为结构清晰,十分易于阅读。这也是搜索引擎优化
SEO重要的一步。
CSS 中的伪类及伪元素有哪些?有什么用?
CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于向某些选择器设置特
殊效果。
下面我们给大家总结下 css 伪类以及伪元素。
伪类:
:active,将样式添加到被激活的元素。
:focus,将样式添加到被选中的元素。
:hover,当鼠标悬浮在元素上方是,向元素添加样式。
:link,将特殊的样式添加到未被访问过的链接。
:visited,将特殊的样式添加到被访问的链接。
:first-child,将特殊的样式添加到元素的第一个子元素。
:lang,允许创作者来定义指定的元素中使用的语言。
伪元素:
:first-letter,将特殊的样式添加到文本的首字母。
:first-line,将特殊的样式添加到文本的首行。
:before,在某元素之前插入某些内容。
:after,在某元素之后插入某些内容。