黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: 柳俊 时间: 2019-7-25 16:21
标题: 技术贴
学了半个月说实话技术贴也不知道该写些什么，我就把自己有道云上的记录的笔记发下给大家参考下吧。
清除无序列表开头的特效：
list-style:none;

text-align 文本水平对齐方式
line-height 设置行间距
text-indent 设置首行文本缩进属性：em(文字单位)
text-decoration 取消下划线属性：none/underline

font-style 文字倾斜控制属性：italic倾斜/normal不斜
font-size 文字大小单位：px
font-family 设置文字字体  例：“微软雅黑”
font-weight 文字粗细 400/700
font-align 文字居中设置  left/center/right/
注：只盒子内容对齐

font（综合写法）：倾斜/加粗/文字大小/行高/字体

链接伪类选择器：
link 访问前
visited 已访问的链接
hover 鼠标经过
active 选定的链接

显示模式转换：
disply :block 转化为快元素
inline 转化为行内元素
inline-biock 转化为行内块元素

背景颜色：
background： color 背景颜色
image 插入图片（url）
repeat 平铺  X Y
position 背景定位设置XY轴
attachment 背景固定  fixed
rgba 背景透明（r,g,b,0.3）
只让背景透明
opacity 让背景和内容透明
opacity:0.3
size 背景缩放取具体的值设置图片位置 background-size:100%（cover）将背景图等比放大铺满盒子但是图片可能现实不全
background-size: contain
将背景图等比放大，接触盒子边缘停止缩放
背景简写：
  颜色地址平铺固定位置（X Y）

盒子模型：
border 边框：
border-width:1px 边框的宽度
-style:  边框的样式 solid实线 dashed虚线  dotted点线

-color：颜色
边框简写 border：边框样式颜色

padding内边距：设置上右下左

盒子实际大小：内容宽高+内边距+边框

margin盒子外边距
块级盒子水平居中 margin：0px(设置高度) auto

盒子圆角：
正圆：border-radius：50%(取盒子宽度半径的值）
矩形：border-radius：固定值(盒子半径以下值)

盒子阴影：
box-shadow：
水平阴影垂直阴影模糊距离阴影大小阴影颜色内/外阴影；
例
box-shadow: 1px 1px 20px 1px green inset,2px 2px 20px orange

css布局三种：普通流布局（标准流）、浮动布局、定位布局

浮动目的是为了让盒子在一行显示
浮动原理：让元素脱离文档流，进行页面效果布局
特性：
1、浮动以后的元素脱离标准流，原本的位置空了
2、下面的盒子就会补上来
3、加了浮动之后盒子显示模式默认相当于转换于inline-block    浮动元素之间默认是没有缝隙的和真正的行内块有差距的
4、如果父级盒子装不下，盒子会掉下来另起一行。

float :left/right; 浮动

浮动元素与标准流的搭配

清除浮动：
为什么要清除浮动：因为父级盒子里面如果是标准流盒子会撑开父级盒子如果是浮动盒子父级盒子如果没有高度就是脱标，影响布局，父级盒子就不会被撑开
解决方法：给父级盒子添加一个属性
overflow:hidden;  溢出隐藏，
隔墙法 chear:both  在最后一个盒子加一个标签填入这个属性
Cursor:pointer 让鼠标变成小手
声明清除浮动的样式：
.clearfix:after {content : "";
display ：block;
height :0;
visibiliti :heidden
clear:both;
}
.clearfix {
*zoom:1;       这个是专门需要给IE6和IE7加入的
}
给父级盒子加就可以解决了
双伪类清除浮动：
/*声明清除浮动的样式*/
.clearfix:before ,.clearfix:after {
   content: "";
   display: table;
}
.clearfix:after {
   clear:both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}

定位：
position:
relative ：相对定位
（相对原来位置来移动，“原位还在”）
absolute：绝对定位子绝父相
如果父盒子没有用定位,子盒子从浏览器为准如果子盒子找不到就会一层一层的往上找，最终以浏览器为标准“不保留位置”
fixed：固定定位跟父级无关  完全脱离标准流

绝对定位和固定盒子设置居中
（不能用margin：auto居中）设置left：50% margin-left（本身宽度的一半）

堆叠顺序：z-index 没有单位只有定位才可以用

过渡特效：
transition: all .2s;
然后设置鼠标经过往left像素。

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2