2018-09-03 CSS 에세이

1. CSS를 추가하는 네 가지 방법

내연 스타일 속성

스타일 레이블

외부 파일 css 예:

@import url(./a.css) ;

2. 가로 내비게이션 표시줄 만들기

모든 하위 요소에float:left

추가

부모 요소에clearfix 클래스를 추가합니다. 예를 들어

.clearfix:: after{
  content: '';
  display: block;
  clear:both;
}

3. a 태그 상속

a {
  color : inherit ;
}

4. a 태그 밑줄 취소 속성

a{
 text-decoration: none; 
}

5. 클래스의 양식을 쓸 때 클래스의 명칭이 너무 간단하면 다른 곳에 영향을 미치기 쉽다
구체적으로 다음을 수행합니다.

.topNavBar  .logo .card{
  font-size:24px;
  font-family: "Arial Black" ;
}

6. 공유된 속성은 부류에 써서 코드량을 줄이고 상속을 통해 부류와 같은 속성을 가지게 할 수 있다.
7. 두 스핀 탭 사이에 간격이 존재하면 아무리 큰 간격이 있어도 시스템은 기본적으로 공백의 거리를 제공한다.
8. margin과 padding의 차이점:
margin: 외부 거리padding: 내부 거리margin: 10px 20px 10px 20px;따르기: 위아래 왼쪽padding: 10px 20px 10px 20px;따르다
9. 바디에는 기본적으로 8px margin 테두리가 있습니다.
10. CSS 전체 이름: Cascading Style Sheet
11. 예쁜 벽지 검색하면 구글 월하븐
12. 배경 그림 배치 방법

13. 一个元素的高度是由什么决定的

高度由其内部文档流元素的高度总和决定

14. 文档流是什么：文档内元素的流动方向

15. 内联元素： 从左往右流动，

例如span标签
如果流动受到阻碍，则换行继续流
若内容是英文，长度很长，那么宽度不够时，不会换行。
若想让长英文换行，加一个css样式 element.style{
word-break:break-all;
}

16. 块级元素： 每一个块占一行，所有的块依次往下流动

不管元素长度多么短，都是占用一行的
若想让块级元素在一行，可以用float:left 父级元素加clearfix css达到目的
css 3 新出了一个属性：

div{
display:inline-block;
}

17. css를 어떻게 디버깅하여 요소 라벨에border--를 약칭border대법!!!

span{
 border:1px solid red 
} 

18. 권장 줄 높이: 글씨체마다 권장 줄 높이가 다르다.
19. font-size :100px;
100은 무엇을 가리키는가, 글자의 최고점 거리 글자의 최저점 크기를 가리킨다.
20. 블록 수준 요소의 행 높이는 내부 문서 흐름 요소의 높이에 따라 결정됩니다.
내연 요소의 높이는 글씨체와 디자이너가 디자인한 글씨체의 높이와 관계가 있다.비교적 확정하기 어렵다.
라인-height가 font-size보다 크면 정상적으로 높아지고, 라인-height가 결정하는데 만약에 font-size가 크면 말하기 어렵다.현학.
21. 버그가 가장 쉽게 발생하는 속성: Height는 천만 개의 높이를 얻지 못한다.
22. 문서 흐름이 화면에 고정되어 있지 않은 경우.

.topNavBar{
  position :fixed;
  top:0;
  left:0;
}

23. 배경 그림을 가운데에 배치하기

.banner{
   height:515px;
   background-image: url(./img/rs-cover.jpg);
   background-position: center center;
   backgroung-size: cover;
} 

24. 배경 그림에 반투명 효과 추가하기

.banner .mask {
   height: 515px;
   background-color: rgba(0,0,0,0.8);
}

25. 카드 수준을 가운데로 맞추기:

.userCard{
  margin-left: auto;
  margin-right: auto;
}

26. 내연 원소는 넓이를 받아들이지 않는다. 어떻게 그를 받아들이게 하고 속성을 추가하면 된다

span{
  display:inline-block;
}

27. 시험점: css로 삼각형을 어떻게 그리는가

div{
  border:10px solid red;
  width:0px;
  height:0px;
  border-top-color:black;
  border-right-color:blue;
  border-left-color:green;
  border-top-width:0px;
}
div{
border: 100px solid transparent;
width: 0px;
height:0px;
border-left-color: #E6686A;
border-top-width:0px;
}

28. 네모난 것을 둥글게 만드는 방법은border-radius:50%;

div{
border: 4px solid red;
border-radius:50%;
}