CSS常用操作——————对齐

一、使用margin属性进行水平对齐   

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    margin-left: auto;
    margin-right: auto;
}

margin:值1 值2

值1代表上下 值2代表左右

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    margin: 100px auto;
}

二、使用position属性进行左右对齐

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    position: absolute;
    right: 0px;
}

三、使用float属性进行左右对齐

*{
    margin: 0px;
}
.div{
    width: 70%;
    height: 1000px;
    background-color: red;
    float: left;
}
时间: 2024-07-28 16:02:52

CSS常用操作——————对齐的相关文章

Css常用操作——————分类

一.尺寸操作 height    设置元素高度 line-height    设置行高 .p1{     width: 400px;     line-height: normal; } .p2{     width: 400px;     line-height: 200%; } .p3{     width: 400px;     line-height: 50%; } <!DOCTYPE html> <html lang="en"> <head>

HTML5学习笔记(十):CSS常用操作

对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素: .center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } 也可以简写为,这里把上下的外边距设定为0: .center { marg

Css常用操作——————导航栏

一.垂直导航栏 ul{     list-style-type: none;     margin: 0px;     padding: 0px; } a:link,a:visited{     text-decoration: none;     display: block;     background-color: aqua;     color: black;     width: 50px;     text-align: center; } a:active,a:hover{   

Css常用操作——————图片

body{     background-color: #0078b3; } .image{     border: 1px solid darkgray;     width: auto;     height: auto;     float: left;     text-align: center;     margin: 5px; } img{     margin: 5px;     opacity: 1; } .text{     font-size: 12px;     marg

css常用操作

css display: display:none:元素隐藏后,不占用布局空间 visibility:hidden:元素隐藏后,继续占用布局空间 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; 内联元素(inline)特性: 和相邻的内联元素在同一行; 宽度(width).高度(height).内边距的top/bottom(padding-to

web前端【第四篇】CSS属性操作

一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(设置字体的样式为斜体)

文档流&amp;文字&amp;CSS常用命令

文档流 文档流就是文档内元素流动方向 流动方向 内联元素从左往右流,宽度不够,之字形,且元素会被截断 块元素从上往下流动,一排一排 注意事项 内联元素中有英文单词,流动时宽度不够,英文单词会整体迁移,不会被打断 若想打断上述联结,请使用css属性 /*想打断的内联元素*/{ word-break: break-all; display: inline-block; } 脱离文档流 类似悬浮在页面上一样 position: fixed; position: absolute; 关于字体 一般,页面

Day49:CSS属性操作(文本、背景、边框、列表、display、边距)

一.CSS属性操作 1.CSS text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如:  red p { color: rebeccapurple; } 水平对齐方式 text-align 属性规定元素中的文本的水平对齐方式. left       把文本排列到左边.默认值:由浏览器决定. right     把文本排列到右边. center 把文

jQuery的常用操作

梳理一下jQuery的常用操作 jQuery隐藏显示对象 id为test的元素的display修改成了"none",即隐藏了id为test的元素:$('#test').css('display','none') 或 $('#test').style.display="none" 我们经常用到的是切换一个元素的隐藏与现实,下面给出代码: var show = $('#test').css('display');//获取id为test的元素的display的值$('#t