ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

笔记

2021-11-01 22:00:10  阅读:101  来源: 互联网

标签:定位 repeat 标签 元素 笔记 background 选择器


css选择器1.基本选择器
id选择器(给标签取id名,以#加id名开头,具有唯一性)

类选择器(给标签取class名,以点(.)加class名开头)

标签选择器(以标签名开头)
2.其他选择器类选择器空格标签选择器(.classname div)  当前元素所有后代元素-子子孙孙.classname>div  当前元素下一级所有子元素-只有子元素3.伪类选择器
:hover 鼠标经过时设置其样式

:action 鼠标按下时设置其样式

:visited 选择已访问的链接,请设置其样式--针对a标签
CSS优先级style属性>ID选择器>class选择器>标签同级别选择器  遵循就近原则盒子模型
盒子水平排列-margin无重合

盒子垂直排列-margin重合
盒子样式
border :1px dashed(虚线) #red

padding:1px 1px 1px 1px顺时针方向,从上开始

margin:0 auto
样式文本样式
font-family: "微软雅黑";  字体

font-size:字体大小 

font-weight:字体粗细

line-height  设置行高
background(背景)

本地图片:background-imge:url('图片地址')

背景平铺:background-repeat

 (1)background-repeat:repeat (默认)平铺(水平和垂直方向都重复)
 (2)background-repeat:no-repeat 不平铺
 (3)background-repeat repeat-y 垂直方向平铺
          background-repeat repeat-x 水平方向平铺

图片定位:background-position
top left(第一个值上中下,第二个值左中右)   

x% y%(第一个水平位置,第二个垂直位置)左上角为0%,0%,右上角为100%,100%,只规定一个值则另一个值也为50%

xpx ypx
 背景颜色:background-color

背景图片大小:background-size布局样式文档流:即文档的排列方式:同一平面中从左到右,从上到下排列脱离文档流:盒子模型脱离源文档的文档排列方式,在同一平面中浮动起来,根据一定的要求排列浮动:float   清浮动 clear:both定位-position
position与top,bottom,left,right联用

Absolute:绝对定位,相对于静态定位(static)以外的第一个父元素定位,若在非静态内则已该非静态元素定位

fixed:绝对定位,相对于浏览器窗口进行定位,既有滚动条时页面效果相对静止类似登录弹框

relative:相对定位,相对于其原本身正常位置进行定位

static:默认值
呈现形式
block:块级标签-可设置宽高,元素独占一行

inline:行级标签-不可设置宽高,元素自适应内部内容

inline-block:介于前两个之间,可设置宽高,但不独占一行

标签:定位,repeat,标签,元素,笔记,background,选择器
来源: https://www.cnblogs.com/sjr200126/p/15496367.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有