前端基础问题：CSS居中的几种方式

【前端基础问题：CSS居中的几种方式】的更多相关文章

前端基础问题：CSS居中的几种方式

水平居中 (1)内联元素: text-align: center; 利用 text-align: center :可以实现在块级元素内部的内联元素水平居中. 如果一行中有多个块级元素,可以通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中. 注意:此方法对内联(inline), 内联块(inline-block),内联表(inline-table), 内联块级弹性盒(inline-flex)元素水平居中都有效. (2)块级元素: mar…

CSS居中的几种方式总结

1.水平居中的 margin:0 auto; 这个是用于子元素上的,前提是不受float影响 <style type="text/css"> .box{ width: 300px; height: 300px; border: 3px solid red; /*text-align: center;*/ } img{ display: block; width: 100px; height: 100px; margin: 0 auto; } </style> &…

css居中的几种方式

居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式. 欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新. 1.margin 这种方式只能实现固定宽度的块级元素水平居中,如果该元素没有设置宽度或者不是块级元素,则不会生效. /*以div元素为例*/ div{ width: 100px; height: 100px; margin: auto; /*或者margin: 0 auto;*/ } 2.line-height 将单行文字line…

前端第二篇---前端基础之CSS

前端第二篇---前端基础之CSS 目录一.css介绍二.css语法三.css的几种引入方式四.css选择器五.css属性相关六.盒子模型拓展一.css介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.css语法 2.1css实例每一个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. 2.2 CSS注释 /*这是注释…

02 前端基础之CSS

目录前端基础之CSS css简介基本选择器(重要) 组合选择器(重点) 属性选择器分组与嵌套伪类选择器伪元素选择器选择器的优先级字体相关背景属性边框属性 display属性盒子模型浮动定位是否脱离文档流溢出属性 z-index属性透明度练习前端基础之CSS css简介 # 层叠样式表>>>:就是给HTML标签修改样式语法结构选择器 { 属性名1:属性值1; 属性名2:属性值2 } 注释语法 /*注释内容*/ 引入方式 1.style内部直接编写css…

前端基础：CSS样式选择器

前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2.一条或多条声明:如下所示: selector { property: value; property: value; property: value; property: value; ... } 例如: h1 {color:red; font-size: 14px;} CSS的四种使用方式 1.行…