text-align

常用的清除浮动的方法有以下三种: 此为未清除浮动源代码，运行代码无法查看到父级元素浅黄色背景。 <style type=”text/css”> <!– *{margin:0;padding:0;} body{font:36px bold; color:#F00; text-align:center;} #layout{background:#FF9;} #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} –> </style> <div id=”layout”> <div id=”left”>Left</div> <div id=”right”>Right</div> </div> 三种清除浮动方法如下： 1、使用空标签清除浮动。 我用了很久的一种方法，空标签可以是div标签，也可以是P标签。我习惯用<P>，够简短，也有很多人用<hr>，只是需要另外 为其清除边框，但理论上可以是任何标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动，并为其定义CSS代 码：clear:both

<div class=“box”> 　　<img /> </div> 水平居中的常用方式： 　 　 text-align:center ——这可以实现子元素字体，图片的水平居中 。 　　 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式： 　　 vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。 　　 这里没考虑flex的垂直居中的用法 div中图片水平和垂直居中方式： 　　 第一种方式 ： 直接手动计算的方式。已知box的高度和图片的高度 .box{ width: 300px; height: 300px; border: 1px solid red; text-align: center; } img{ width: 80px; height: 80px; padding-top: 110px; } 备注：这种方式是： 用box的高度减去图片的高度再除以2 ，就是padding-top的值，当然也可以使用margin-top，这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。 　　 第二种方式 ： 图片已知宽高 1 img{ 2 　　　　position:relative; 3 　　　　top:50%; 4 　　　

前端开发中，我们经常需要对元素进行水平垂直居中。为此，特地总结了让元素居中的方法。 水平居中text-align：center; 这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素（span、img、a等），直接在其父级元素上加上属性text-align:center;即可； 专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧 （从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） .way { border: 1px solid red; width: 250px; } .way img { max-width: 200px; } .way1 { text-align: center; font-size: 0px; //HTML图片之间，浏览器会产生默认的间距，父元素设置font-size：0px;可以很好地解决这个问题。 } <div class="way way1"> <img src="fj.jpg" alt=""> </div> 使用margin：0 auto;水平居中 前提：居中的元素必须是块级元素，如果是内联元素，需要添加属性display

文本 文本排列属性是用来设置文本的水平对齐方式。 文本可居中或对齐到左或右,两端对齐. 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸） h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;} 文本修饰 text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主要是用来删除链接的下划线： <style> a {text-decoration:none;} </style> 文本缩进 文本缩进属性是用来指定文本的第一行的缩进。 实例 p {text-indent:50px;} color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space

注：Python3，Django1.9 新开一个应用：user_ex,并在settings.py里注册 依赖项：django-simple-captcha （用pip） settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', '......', 'user_ex', 'captcha', ] 主路由urls.py包含应用user_ex的路由和依赖项captcha的路由 urls.py from django.conf.urls import url from django.conf.urls import include urlpatterns = [ url(r'^user_ex/',include('user_ex.urls')), url(r'^captcha/',include('captcha.urls')), ] 应用user_ex对应路由配置 user_ex.urls.py from django.conf.urls import url

1、字体系列属性 font-family：字体系列 font-weight：字体的粗细 font-size：字体的大小 font-style：字体的风格 2、文本系列属性 text-indent：文本缩进 text-align：文本水平对齐 line-height：行高 word-spacing：单词之间的间距 letter-spacing：中文或者字母之间的间距 text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个） color：文本颜色 3、元素可见性： visibility：控制元素显示隐藏 4、列表布局属性： list-style：列表风格，包括list-style-type、list-style-image等 5、光标属性： cursor：光标显示为何种形态 不可继承的： display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread

width和height定义是Content部分的宽度和高度,padding,border,margin的宽度依次加在外面.背景会填充padding和content部分.不同的浏览器显示的效果有些不同.左右margin加倍问题当div为float时,IE6中左右的margin 会加倍. W3C定义的盒模型模式如下: width和height定义的是Content部分的宽度和高度,padding,border,margin的宽度依次加在外面.背景会填充padding 和content部分. 但是由于浏览器设计上的问题,不同浏览器显示效果会有些不同. 1:左右Margin加倍的问题 当div为float时,IE6中div左右的margin会加倍.比如: 1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > 2 < html xmlns ="http://www.w3.org/1999/xhtml" > 3 < head > 4 < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> 5 < title

登录界面 login.js // miniprogram/pages/login/login.js Page ( { data : { username : null , password : null , currentId : null , } , formLogin : function ( e ) { //表单提交数据 //判断输入是否为空 if ( e . detail . value . inputname == "" | e . detail . value . inputpass == "" ) { wx . showToast ( { icon : 'none' , title : '请输入有效值' , } ) } else { const db = wx . cloud . database ( ) var username = e . detail . value . inputname var password = e . detail . value . inputpass db . collection ( 'user_info' ) . where ( { //查询用户信息数据库 username : username , password : password } ) . get ( { success : res => { if ( res .

一、文本的水平对齐方式 使用text-align来设置文本的对齐方式；text-align的取值:left(向左对齐)/center(水平居中对齐)/right(向右对齐)/justify(两端对齐); text-align只对应用此样式的元素的非块级子元素有效，对块级子元素无效；对比使用margin进行设置居中对齐，不同点是margin的作用效果对象是当前块级元素，而并非子元素； ps:line-height(行高),如果行高的设置值大于font-size(字体大小)的设置值，则一行中的文字将在该行的设置的行高区域中垂直居中显示，这个是作用到应用了该样式的元素的区域里的每一行； 二、定位 1.普通流定位，这也是浏览器默认的文档流定位； 2.浮动定位； 3.相对定位:relative(相对于该元素原始位置产生的偏移距离，不会脱离文档流)； 4.绝对定位:absolute(会脱离文档流，相对于离自己最近的以定位的祖先级元素发生位置偏移,ps:只要一个元素的样式被relative/absolute/fixed这三者的任何一个所修饰，那么该元素就成了已定位元素)； 5.固定位:fixed(会脱离文档流)； (1)普通流定位：每个元素都有自己的占地空间，每个元素都是从其父元素的左上角位置开始显示的； (2)浮动定位float:left/right/none; left:元素脱离文档流